14 replies [Last post]
focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

Hi all...

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.

http://www.matthewdrummond.com/ca_site/

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.

CSS

* { font-size: 100%; margin: 0 auto; padding: 0; line-height: 1.3em; font-family: Arial, Helvetica, sans-serif; } body{ background-color: #000000; background: url(../images/strip.gif) repeat-x #000000; } #container{ background-color: gray; border: 0px solid red; width: 697px; height: 596px; } #header{ width: 697px; height: 107px; border: 0px solid white; background-image: url(../images/header.gif); } #side_nav{ float: left; width: 170px; height: 489px; background-color: green; border: 0px solid blue; } #content{ float: right; width: 527px; height: 489px; background-color: red; border: 0px solid green; } /*#footer{ margin: 430px 0 0 0; position: absolute; width: 697px; height: 40px; background-color: white; border: 1px solid blue; }*/

HTML

James The 3D Sculptor






Thanks for the extra pair of eyes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

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?

Thanks for the extra pair of eyes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Does adding

Does adding display:inline-block; to the non-floated #content cure the problem?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

That didn't work

When I used display: inline-block; ...

nothing happened to the page good or bad. It remained the same.

http://www.matthewdrummond.com/ca_site/

Thanks for the extra pair of eyes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

I removed the unnecessary properties

All of the borders have been removed.

What do you recommend I do next?

Thanks for the extra pair of eyes.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 Pixel Jog?

Is this suffering from the 3 pixel jog bug that afflicts IE?

focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

I believe so...

I'm completely lost as to where to go from here.

Thanks for the extra pair of eyes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Simplest solution is to

Simplest solution is to place a red background on #container

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

thank you

I guess that would solve the problem.

Thanks for the extra pair of eyes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

nav Buttons

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?

http://www.matthewdrummond.com/ca_site/

HTML

PS... I'm still working on the design.

Thanks for the extra pair of eyes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

focused
Offline
Regular
Orlando, Florida USA
Last seen: 14 years 42 weeks ago
Orlando, Florida USA
Joined: 2006-05-17
Posts: 20
Points: 0

OK

Thanks, I'll take a look at it.

Thanks for the extra pair of eyes.