CSS Help - Strange Border Issue

Goksly · 16 Dec 2008 at 13:00

Hi,
I'm trying to create a site with a banner, 2 columns (menu and content) and a footer. Below is a screen shot of what I have so far:

When the borders are off, everything looks all fine and dandy, but as you can see, when they are switched on, the content border goes through the menu.

I've floated the menu left and have the main content as block. The overall affect I'm trying to have is a menu that takes the space it needs and then the content to use the rest of this space (I don't really want to specify fixed width if I can get away with it).

So does anyone know how to solve the border issue?

Cheers

TwoSaints · 16 Dec 2008 at 13:26

When you float something the in a bizare manor takes up 'no space' and all that wraps around it is text or other floated items. things like divs etc will therefore overlap, which explains why you are getting the problem but not how to solve it i'm afraid. cue somebody who knows more than me:...

agent_paul · 16 Dec 2008 at 13:27

im not sure but it looks to me that the content or the menu blocks are just overlapping each other. to test if thats true, you could colour the backgrounds of the blocks to see.

Tripnologist · 16 Dec 2008 at 13:31

You could apply overflow: hidden to your content div. This would make it contain the float.

Goksly · 16 Dec 2008 at 13:48

Tripnologist said:
You could apply overflow: hidden to your content div. This would make it contain the float.

ding ding, we have a winner. Thanks - pretty new to CSS and the lark.

Tripnologist · 17 Dec 2008 at 09:38

No problem. It'll come if you keep at it.

Sic · 17 Dec 2008 at 10:04

If it ends up not clearing the float in IE6, make sure you define a width on the element that you set overflow:auto to.

Goksly · 17 Dec 2008 at 12:23

But that would go against what I need - one column with a width as wide as it needs and the other taking up the remaining space. This must be possible?

Sic · 17 Dec 2008 at 12:30

not sure without testing, but you might find that the float won't clear using overflow:hidden in IE6. The other option is clearing div

Tripnologist · 17 Dec 2008 at 12:45

I used to use clearfix for clearing but I've found overflow:hidden to work every single time. At least on the 15 or so websites I've done since using it.

If you run into any problems, I'm sure one of us here will be able to help.

*hint for the future > put your site online if/when you have problems as it makes it easier for us to see what's going on.

Sic · 17 Dec 2008 at 12:47

In the 8 or so I've done, I found that for IE6, I need to define a width (whether it be a percentage, pixel or em).

Yeggstry · 17 Dec 2008 at 12:55

I've had this problem recently. Set the margin-left to be the same as the width of the menu (since if you're floating you should have a fixed width anyway). This should work in IE as well