[web] CSS div positioning problem

Dont position either of them using absolute.
Make both of them float:left. And make the content div clear:right.

Quote:

Original post by PhilMorton Dont position either of them using absolute. Make both of them float:left. And make the content div clear:right.

I tried this but the Content section appeared below the DirectoryMenu, not beside it. I should mention that in my DirectoryMenu and Content sections there are breaks (br /); it is not one big object like a table or something. Does anyone else have any ideas? Thanks

I'm still having this problem if anybody has a potential solution for me. Thanks.

hmm, you could give this tutorial a go;
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Or search for "two column layout div css" to find other tutorials on google...

Try Two Column Layouts on css-discuss.

Something really basic would be:

<div id="content">

My Content

And other stuff like that

</body></html>


If you want to include somthing like a footer box below both of them, just put another div below them with the style clear: all and it should stretch across the page.

Awesome, thanks for the tutorials. They helped alot, but I am still having some trouble. I now have 4 div sections: Heading, DirectoryMenu, Pictures (content), and Container which holds all of the other divs. Here is how I have them defined now:

and this is the format they are defined:

Problem 1 - The Pictures section contains 2 tables; 1 for the Pictures, and another for the Pages (i.e. if there are 100 pictures and you are showing 10 pictures per page, you will need 10 pages). I want the Pictures section to extend to the right edge of the screen (i.e. the right edge of the Container div) so that the tables extend from the left edge of the DirectoryMenu to the right edge of the screen. I have tried making the tables widths 100%, but then it makes the tables width the size of the screen width, so it extends past the right edge of the screen quite a bit. If I don't specify a width in the tables (as it currently is) then the tables only extend as much is needed to display their content. How could I get the tables to extend to the right edge of the screen?

Problem 2 - The Pictures section does not remain a rectangle. That is, if the Pictures section extends past the DirectoryMenu section, then the Pictures section moves over to the left edge of the screen. Is there any way I could specify it not to do this?

To see the page as it currently is go here. Scroll all the way to the bottom to see Problem 2.

Any more help would be very appreciated. Thanks

Instead of floating the directory menu left, you could float the pictures section right. That will solve #1 (because 100% table width will be picture container width) and #2.

Quote:

Original post by Sander Instead of floating the directory menu left, you could float the pictures section right. That will solve #1 (because 100% table width will be picture container width) and #2.

I tried this and it seemed to correct the width problem, but it also pushed the Pictures section down underneith the DirectoryMenu section. How could I fix this problem so it stays beside the DirectoryMenu, not under it? Thanks

In the source, put the pictures section first and the directory menu second when you float the pictures section. Also make sure that you don't make it too wide. If the picture section plus the directory menu together are wider than the browser width, whatever comes second in the source will get pushed down.

Thanks for everyone's help. I was hoping to not have to specify a width for the Menu and Pictures section as I wanted them to dynamically adjust with eachother based on their content, but it looks like this just isn't possible. In the end I had to specify a width (or max-width) in the 2 sections to make it appear properly, but it still looks okay so I'm happy. Just wanted to say thanks again to everyone that helped out.