Originally, my webpage two table columns. The first had the navigation sidebar, and the second had the main content of the page. I could not figure out how to get proper columns with just CSS and divs. Making the sidebar
float: left worked except that then the content of the page started wrapping around the bottom of it. Of course, I couldn't find any CSS to get a float to take up the whole height of its container. In the end, I resorted to setting a left margin on the content wider than width of sidebar, which made the two pieces stay out of each other's way.I'm curious as to what real web-designers say about this problem. There must be some trick I'm missing. It seems many sites, like python.org, are forced to resort to
position: absolute tricks to get nice sidebars. I also wonder if the supposed problem with table layouts, that screen readers have trouble with them, could be alleviated by adding a role="layout" attribute to tables. It's a case of "practicality beats purity" if I ever saw one.
9 comments:
I'm not a web designer myself but this no-table-for-layout thing gave rise to a gazillion of css-based layout "templates", if you will.
See for instance the examples on http://css-discuss.incutio.com/wiki/Three_Column_Layouts
Or css based grid systems like http://960.gs/
Maybe you can get some ideas from those? It took a while for me as well to get used to, if you come from a table based layout background.
I always base column layouts on Matthew James Taylor's work:
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
CSS 2 makes columns very hard to do correctly. I hope CSS 3 provides a saner solution.
You should take a look at the nav, section and header tags for HTML5
Why "forced to use"? position: absolute is perfectly valid HTML5/CSS coding.
HTML code should be semantic; CSS code should be visual.
With that said, you can avoid wrapping further down by setting widths:
[nav]sidebar[/nav]
[article]main text[/article]
css:
nav { width: 20%; float: left; }
article { width: 75%; float: right; }
However, I would personally do this:
nav { position: absolute; left: 0em; top: 0em; width: 15em; }
article { position: absolute; left: 16em; top 0em; }
The way I've handled this situation is that I create _three_ divs. The first is the "outer" div that serves as a general container. In side that outer div are the two inner divs of unequal size - the thinner block on the left for the nav bar, and the thicker bar on the right for the content.
Floated elements will expand to contain their floated children. If you don't want to float everything, set `overflow: hidden` on the containing element:
<div style="overflow: hidden">
<div style="float: right">Look at me!</div>
</div>
A List Apart had a good CSS Floats 101 article recently; CSS float theory is old but still relevant, too
Don't be discouraged so easily. As a Python developer, you surely know that there are advantages to be gained by separating concerns... In this case the concerns are presentation vs structure.
You are jumping onto the CSS bandwagon late. On the upside, every problem you will come across has been solved ten times over already. You will have to spend time learning and doing under research into all of the tricks that have been discovered, but you will be better off for it in the long run.
You must know that the disadvantage of tables goes beyond semantics, so I'm hoping that your suggestion suggestion of just throwing a role attribute on the table wasn't a completely serious one.
Finally, consider who is actually reading your blog. I would bet that most have modern browsers. If that is the case, give the CSS3 flexible box layout a look.
Post a Comment