Thu, 2013-12-05 08:42
So, I'm trying to sort out why my layout is doing what it's doing. This is probably my fifth effort to grasp CSS over the years 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!
Thu, 2013-12-05 08:54
#1
Hi maxiedaniels, Yep css is
Hi maxiedaniels,
Yep css is not quite as simple as it first seems.
If you add widths to the floated columns, they can be percentages like 20% and 80% things will start looking better.
To get the main back you can give it block formatting context by floating it or setting it's overflow to hidden or use clearfix.