Having learnt about the box model from Dan (especially his video tutorials) and others here last year, I’m doing a new website using what I’ve learnt. One thing I’m stuck on, however, is the best way to layout three columns.
I want three columns in my main ‘wrapper’ section, ideally with the side columns fixed width and central column expanding to fit.
Options seem to be three CSS boxes (two floated left, the other right), or inclusion of a table inside the main ‘wrapper’ element. My preference is for the former, though neither allows me to fix the width of the sidebars while keeping the central column fluid.
Recommendations for best approach please - and thoughts on using three in-line boxes versus a table.
Set up your column divisions as area guides in fixed pixel sizes instead of content containers. Inside these column area guides put your content divisions, then set their sizes to be 100% width of the column guides, fixed height for the sidebar areas, and flexible height for center column.
It’s great for figuring out column sizes. So for instance you want 3 columns and your page width (or wrapper for the three columns) is 800px. You’d then want to add margin accordingly of 10px between them…it’d tell you that you need your columns need to be 260px each.
I’m going to be updating my box model screen-cast soon enough to cover a few items that were in-accurate in the first one.
What I’ve gone with is three divs inside the wrapper, the left one at 20% (float:left), the middle one at 60% (float:left) and the right one at 20% (float:right). Inside each of those will be further divs containing content (as per your screencast example, Dan).
This seems to be working okay but would appreciate your pointing out any weaknesses.
Look forward to the updated screencasts: the first ones were very useful.
I’d float the last one left as well and set the clear’s to none for all of them. That’s one error in my cast. Then you can push things around with your margin’s instead of creating empty div’s.
It’s on my list of screen-cast’s to redo along with a few others.
Good luck David, I look forward to hopefully seeing it all in action.