CSS Layout issues

[maxiedaniels]

So, I'm trying to sort out why my layout is doing what it's doing. This is probably my fifth attempt to grasp CSS and I'm apparently just very bad at it. C++, C, Java, C#, Actionscript, Ruby, Python... all come easily. But CSS is impossible - I spend HOURS trying to figure out the smallest mistakes...

Anyway. Here is my test page: http://maxfarrar.com/testing/test.html

Note that I set transparency background colors on my divs so I could easily see what is going wrong.

My goal is to have my sidebar div on the left and my content div filling up the rest of the container + centered. The container is called main (in my CSS definitions I mean).

Currently I'm floating the sidebar left, AND floating the content div left too. However in firebug, I can see the "main" div (the container) disappears - it's height gets set to 0 it seems. If I *don't* float the content div, the content div seems to go underneath the sidebar div as well. Although, the content doesn't go underneath. But, no matter *what* I do, I can't get the information in the content div to be centered.

One more thing - why is my sidebar not vertically filling the main div entirely?

I must be missing some simple concepts here but I've done quite a few tutorials these last few days... Any help would be greatly appreciated!

 

[:LJ:]

Okaaayyyyyy....is this what you're after?

http://www.digitalscream.org.uk/cryptotracker/CryptoTracker.html

There are a few things here...

- You've got a fixed width for the whole thing (800px), so there's no point trying to define the main content area width by percentages. Your sidebar width is 170px, so I defined the content width as 630px.

- Your main div wasn't showing as present in its own right because you'd floated everything in it. You'd got half way to the solution by putting <div class="clear"></div> in at the bottom, but you hadn't defined .clear { clear: both; } in your stylesheet. When I have a problem like this, I find it's often handy to put some bottom padding on the div that's disappeared - that way, you get to see where it's appearing (padding is added to whatever width or height it ends up with).

- One way to get a short div to expand to vertically fill its parent is to position it absolute, then define the top and bottom as zero in the CSS (see the modifications I made to the .sidebar class). This requires that its parent div be positioned as well - if you don't want to move it, just position it as "relative". Of course, once I'd positioned the sidebar as absolute, the "float: left;" on the content div put it underneath the sidebar; therefore, I floated it right instead. If you position both divs as absolute, the "main" div will again disappear (but you won't be able to fix it by putting a clearing div in there, because its children have been positioned completely outside it and therefore the div contains nothing to set its height by).

- In order to horizontally centre a div within its parent, you have to give it a fixed width then set the left and right margins to auto.

Does that help?

 

[maxiedaniels]

Wow, I did not expect such an informative response. Thank you so much - HUGE help. I'm going to document this entire issue and your response in Evernote, I think it may be something that will screw with me in the future.

Seriously, thank you!!!

 

[maxiedaniels]

You've got a fixed width for the whole thing (800px), so there's no point trying to define the main content area width by percentages. Your sidebar width is 170px, so I defined the content width as 630px.

Some clarification on this if you don't mind I don't mind doing some subtraction but I didn't realize that was necessary - there's no way to set it to automatically fill the rest of the container?

 

[:LJ:]

Some clarification on this if you don't mind I don't mind doing some subtraction but I didn't realize that was necessary - there's no way to set it to automatically fill the rest of the container?

You can, but it's not always reliable (and the method escapes me right now). CSS3 is better at this sort of thing, I believe.

Happy to help, BTW