I am currently working on a two-column layout. My width of the div for the site is 697 px and inside of that I have to additional divs... a right column called #side_nav which is 170px in width and a left column called #content which is 527px in width.
I floated the right column right and the left column left. Everything is working just as it should in FF and in IE 7, but IE6 for some reason seems to be adding extra pixels to my left column. Because of this, the left column renders under the right column.
Can anyone assist me with problem? Thanks in advance.
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
background: url(../images/strip.gif) repeat-x #000000;
border: 0px solid red;
border: 0px solid white;
border: 0px solid blue;
border: 0px solid green;
margin: 430px 0 0 0;
border: 1px solid blue;
James The 3D Sculptor
Quickest solution would be:
Quickest solution would be: remove the width and float from #content and just give it a left margin equal to the width of the sidebar.
That worked except...
Thanks, that worked. It moved my content Div up in IE6, but now in IE6 only, there's a small 3 or 4 pixel space between the two divs.
Is there a way to close this gap without sending the content div back to the bottom of the page?
Does adding display:inline-block; to the non-floated #content cure the problem?
That didn't work
When I used display: inline-block; ...
nothing happened to the page good or bad. It remained the same.
Hmm, realised that you
Hmm, realised that you already had triggered hasLayout with the height declarations.
Can you remove all unnecessary properties such as those borders.
I removed the unnecessary properties
All of the borders have been removed.
What do you recommend I do next?
3 Pixel Jog?
Is this suffering from the 3 pixel jog bug that afflicts IE?
I believe so...
I'm completely lost as to where to go from here.
Simplest solution is to
Simplest solution is to place a red background on #container
I guess that would solve the problem.
It does if you are really
It does if you are really wanting two solid blocks in that manner, your content is unlikely to need or indeed should not abut the left edge so the problem should remain hidden, not ideal but often, regardless of IE uselessness, attempting exacting pixel perfection is a folly, one tends to build in space for elements to breath.
I've now moved on to the navigation buttons. The way I have it set up, they come out seamlessly in FF, but in IE, they have a gap in between them. How can I use CSS to solve this problem?
PS... I'm still working on the design.
Have a look in the 'How To'
Have a look in the 'How To' section of the forum for a post dealing with white space issues, that might have the solutions.
Thanks, I'll take a look at it.