Sat, 2007-01-13 10:48
This is just a simple 2 column layout. Only 2 columns. No header nor footer. This is because the 2 column layout page is included into a php file that has a header and footer.
Anyways, on with the problem. In IE7 the entire div(side) is way at the bottom. In Firefox2, only the border of the div(right) is at the bottom. The actual content of the div(side) is in the correct position. The div(content) however is lining up just fine.
Here is the code.
layouts.css
#content {
background-color : #fff;
width: 510px;
float: left;
marin-top:0px;
margin-left: 1px;
padding: 5px;
clear: left;
}
#side {
background-color : #fff;
border-left: 1px solid #f6f;
width: 240px;
marin-top:0px;
margin-left: 508px;
padding: 5px;
}
html
TEST
Test
Test
Test
SIDE
Sat, 2007-01-13 11:16
#1
We will help you , but we do
We will help you , but we do tire of having to ask people to post up all their code! snippets like this don't help us in knowing what else might be effecting things, such as is there a DTD in that header that has been omitted.
In this instance try removing the width from #side and matching the margin to width.
Hugo.
Sat, 2007-01-13 15:02
#2
Oioi jeff, you should know
Oioi jeff, you should know better than to cross-post, specially with me on both forums 
http://www.cdg.net/forums/viewtopic.php?t=44062
I answered your topic on CDG.
My, I have been busy 
Sat, 2007-01-13 16:03
#3
Great another one! thanks
Great another one! thanks for wasting the time of one of us. I posted this morning, TPH this afternoom GMT and I notice no reply to either 
nice one!
Sat, 2007-01-13 16:09
#4
Don't panic Hugo, I was the
Don't panic Hugo, I was the one who suggested this site to Jeff - I just wish he hadn't posted to both 
but he'll be back, don't worry.
Sat, 2007-01-13 16:16
#5
Oh Ok, sorry then Jeff it's
Oh Ok, sorry then Jeff it's just that cross posting bugs the hell out of some of us (well me ) and I'm getting a little peeved with the amount of people never bothering to reply back, taking forum help for granted. So I was probably hasty in my response here.
Hugo.
Mon, 2007-01-15 07:51
#6
Whooops. My bad guys. Well
Whooops. My bad guys. Well that won't happen again. None the less thank-you very much for your help.
I'll let you know if I have any further problems with my css layout.
PS: That was all my code, minus the doc type. But next time I will be sure to post ALL of the code.
PS2: I don't take it for granted. I just haven't been on the internet in a bit. I've been somewhat busy.
Mon, 2007-01-15 08:45
#7
Is the initial problem
Is the initial problem sorted though Jeff?
Mon, 2007-01-15 08:59
#8
I don't really know how to
I don't really know how to tackle this. I am a CSS noob. I started really getting into CSS and understanding it well. Then I disappeared from the scene for awhile and now I am trying to get back into it. But if I remove the width from #side won't I lose the ability to control how width it goes. Because in total everything can only be 765px.
If it helps. I used this as a reference.
Mon, 2007-01-15 09:16
#9
No if you have these two
No if you have these two elemnts ina fixed width parent then simply floating one with fixed width and leaving the other to take the remaining space while using margin to pull it away from behind the float will work , the parent taking care of your overall width. Adding width to elements following floats is highly problematical in IE6 due to it's buggy float model which gets confused as to where it should consider that width is to be placed and start from.
Anyway try it and see what results you get.
Hugo.
Mon, 2007-01-15 21:39
#10
My original point was that
My original point was that your left column is 510 px (plus any borders and padding) yet your left-margin on the other element is only 508 pixels, so it's not going to work?
Tue, 2007-01-16 23:47
#11
Grr. I did everything
Grr. I did everything basically the same as the example I was using and it still doesn't work. This is annoying.
Here is mine:
http://www.insuranceagencywebsite.com/DIV_CSS_LAYOUT/about.php
Here is example:
http://realworldstyle.com/2col.html
Here is the CSS:
body {
background-color : #ccc;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #1a1a1a;
}
/* 2 Column Standerd Layout */
#content {
background-color:#fff;
width: 220px;
float: left;
margin-left: -1px;
padding: 10px;
}
#side {
background-color:#fff;
padding: 10px;
margin-left: 230px;
border-left: 1px solid #006;
}
.spacer {clear: both;}
Here is the PHP file that includes the HTML file:
South Hill Insurance
<?php include "about.html" ?>
And the HTML:
x
y
Wed, 2007-01-17 16:03
#12
What's the problem? Works
What's the problem? Works fine for me in FF?
Wed, 2007-01-17 23:23
#13
thepineapplehead
thepineapplehead wrote:
What's the problem? Works fine for me in FF?
IE it dies. All the right hand side content finds its way sitting at the bottom all the time.
In Firefox the border stays at the bottom but then content is where it should be. Its hard to tell thought because I don't have much content in it. If I put like 10 lines of stuff you'd see that the border is way down at the bottom.
Wed, 2007-01-17 23:44
#14
Hi I suspect, because you
Hi
I suspect, because you are using floats, IE may be adding the 3 pixel jog, which is forcing the center content down because the left float intrudes into the center. Can't remember how to fix it. Check www.positioniseverything.net for ideas. If you put a colored backgorund for the two divs, it would be more obvious.
Mon, 2007-01-22 08:26
#15
I've moved passed the
I've moved passed the troubles of dealing with that particular 2 column layout. I haven't came across anything that doesn't have problems with it though.
The latest problem I run into is that if the RIGHT column contains more content than the MAIN (left) column than the RIGHT column will wrap underneath the MAIN column with it's extra content.
Example:
--HEADER
--MAIN |--RIGHT
--MAIN |--RIGHT
--MAIN |--RIGHT
--
--RIGHT
--RIGHT
--FOOTER
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
http://www.glish.com/css/9.asp
Both of these look great from the example, but once you fill that right hand side content with more than whats in the left side it gets all screwed up. Is there a quick fix for this?
Mon, 2007-01-22 08:53
#16
Well, I've figured out a
Well, I've figured out a fix.
http://www.neuroticweb.com/recursos/2-columns-layout/index.php
It works nicely except the only feature I can't seem to get working correctly is having a divider of some sort in between column A and B. It would be nice to just set a border property to one of either side's but that doesn't seem to work correctly. :\