I am trying to learn css and have a question I hope someone can help me with.

 

If I have 2 floating position relative divs is there a way of making them both the same length. One div is float right and the other float left and I want both divs to be the length of the longer div so that they both end at the same point on the page.

 

Any suggestions please.

this can be quite tricky, there is no exact solution as setting the div height to 100% will just default to auto, and only be as high as the content.

 

To get around it you can create the appearance of a fake column with a repeating background image on the right or left that gives the appearance of a column, but is actually in the main body, there is alot of info on google if you search for 'CSS faux columns'.

 

before trying the fake column, try adding a clearing div at the bottom of the column you need to stretch down,

 

e.g.

.clear {
clear:both;
}

 

<div id="right-column">

<...all your right column stuff>

<div class="clear"></div>

</div>

 

I'm not sure if the clearing div will work if they are in separate containers but its worth a shot.

You can also do it by nesting the div with most content inside the one with least content. See item 16a here:-

http://www.wickham43.net/firefoxbackground.php

 

As Stevo said, it can be tricky. You open a div for the width required for both, nest the div with most content, then put the content for the div with least content and its background is dragged down to the bottom of the nested div.

Thanks for that, I will have a look but really want to try and use CSS styling for the column borders and avoid images if at all possible. Tried the clear both but it didn't work.

 

But thank you anyway, I will have a search

Thanks Wickham

 

Problem with the nesting is that the main body content is likely to be the biggest content and the sidebar least so this would mean the body content div would be inside the sidebar div however I want the divs to be read by search engines Body Content THEN sidebar which I can't do if they are nested. Sorry to be a pain, if its impossible then so be it!!

Hi Wickham love the link - very very useful. I reckon your method 19 will work for what I want, excellent thank you very much.