CSS two column glitch

philjohns

Senior Member
This is really bugging me!

Im designing a website with two columns, the left is thin and used for banner adverts and the right is wider and used for content.

It works fine until the left column becomes longer than the right column - when this happens the background image of my container div stops repeating itself - it will only repeat to the bottom of my right div!

Anyone else have this issue and/or know how to solve it?!

Thanks,

Phil
 
Take it you are floating the left coloum left.
What you need to do is add a clear div at the bottom and then clear both so for example.

<div id="wrapper">
<div id="left">

</div> //end of left col.
<div id="main">

</div> //end of main
<div id="clear"></div>
</div> //end of wrapper

Then have CSS similar to this ~
#wrapper{background:url("someImage.png")}
#left{float:left}
#clear{clear:both}

By the sounds of it it is because the left coloum is floated, this will then take it out of the normal flow of the document, when it hits the bottom it justs floats over it, if you like, and so therefore the background image doesn't repeat.

The new div with the clear id basically stays at the bottom of the floated element, so will move the bottom of the wrapper div down, and thus the background image, when the left coloum becomes too big.

Let me know if that has sorted it.
If not wack some code up, as miralize suggests, and we'll have another look.

Jaz

Key:
Purple ~ XHTML
Green ~ CSS
Orange ~ Comments
 
Is it not better to make it a class instead of an id? I always thought that if you want to have to option to use it more than once then you should make it a class?
 
Yeah you are right I suppose.
But I look at it like this TBH ~

id="clear" = 10 characters
class="clear" = 13 characters.

So extra bloat, be it small.

That and if it is only used once then an id is semantically more correct, as a class is for mutiple items with the same code, an Id is for 1 unquie item.

Either way it will work, so I don't suppose it actually matters if it solves the problem TBH. :)
 
TBH it is probably just me being sad. :D
I mean I could label the id c instead of clear and save 4 characters, so I suppose that's a lame arguement TBH. :)

To me it's more the semantics I suppose, but you are still right though.
 
change id to class and in the css the # would change to a .

<div class="clear">

.clear { clear: both;}
 
Back
Top