How to organize page layout with div's

Question

Hello,

I have a question for the more experienced programmers here.

How can I best organize the div's to have like a left side, a middle side and a right side?

I am doing my website now for a while and I spend half a day moving div's around because they don't stay in place after I put another one in and I want to work with the relative option.

Also what I do is get them into position with big negative numbers. It just does not seem to be the right way to do things. I also get scrolbars when everything fits on the screen. Working in designmode in dreamweaver cs3 is not possible, because everything is tumbling all over each other.

I am hoping for some input on how to do this better.

thanks, Richard

Answer 1

You should learn CSS.

What exactly are you asking?

Answer 2

Use a CSS grid layout

Blueprint is my current favorite: http://www.blueprintcss.org/

I use it through Compass/Sass: http://wiki.github.com/chriseppstein/compass

Positioning manually is a recipe for disaster unless you really like thinking through floats. Grid systems allow you to specify things in a simpler manner. Compass allows you to do this while maintaining semantic markup.

Answer 3

Start with a proven layout from a site like position is everything. Save you some time reinventing the wheel. CSS is something that just takes time to learn.

Wanting to 'work with the relative option' is not always an option or the best way. It depends on what you are trying to do in each particular case.

Anyway the usual reason for things moving around is because you are miscalculating the size of things. If your layout is tight it only takes a mistake of 1px to push a column down under everything. Try putting borders on things temporarily so you can better visualise what is going on.

Answer 4

Using div's to create a table is usually not a really good idea. While certainly possible, the best solution is almost always to create an table. Well-thought out use of tables is not a speed problem on modern browsers.

Answer 5

If you want divs on the left, middle, and right of something, you're looking for the float property. Do this on your left div for example:

float: left;
position: relative;

and it will move the div to the left of the page, and force the other content to the right of it. This is an easy way to create a sidebar for an area of the page, for example. You can still set height and width on an element floated this way, and since it can still accept the position: relative; property, it's easy to position other things inside it.

Answer 6

There's no need to learn blueprintcss to create a simple div layout.

To get started with your div layout:

1. Put a width on the divs
2. Give them all a float style.

Example for a three columns layout:

<div id="left_panel"  style="float:left; width:100px;">Left pane (100px)</div>
<div id="contents"    style="float:left; width:400px;">Contents (400px)</div>
<div id="right_panel" style="float:left; width:100px;">Right pane (100px)</div>

Additional effects of div layouts:

1. If you resize your window and shrink it, div's can wrap to the next line.
2. If contents inside the div might get bigger than the div's height/width, use the "overflow" style to decide what to do. You can set it to hide the overflowing contents, or automatically add scrollbars to your divs.

I hope this shows you how simple div layouts really are. You can do your layout with divs instead of tables, but that doesn't mean that every table should be converted to divs, for example actual tabular data should be in tables.

Answer 7

You seem to be describing a 3 column layout.

Check this page for a index of examples.

Answer 8

Hopefully this isn't deemed argumentation-by-link :)

I was first learning about div-based multi-column layouts about 5 years ago, and the tutorial that helped things click for me was at Maxdesign.com. That links to a tutorial taking you step-by-step through building a basic 3-column layout.

I don't think I would follow that method completely these days (for example, techniques like faux columns have come about since that tutorial was written), but it was a good ice-breaker into the mode of thinking that CSS-based layout requires.

Answer 9

In Search of the Holy Grail is a great article from ALA that explains the "best" method of setting up a 3 column layout with fluid center/fixed sides, and correctly source-ordered <div> elements.

Answer 10

In my opinion, here are some basic principles to keep in mind when structuring your site with CSS:

• Positioning: A common mistake that visual developers make when constructing their first pure CSS site layout is to use absolute/relative positioning properties. When placing your elements on a page, it is all about the box model and how margins, padding and widths interact with each other. There is no need to use the position property at all until you are further along. There are some exceptions to this rule, but we'll keep it simple for now.

• Wrappers & containers: Having mentioned the box model above, leads me to my next point. You should be able to position all of your structural elements using the margin property correctly. Sometimes developers mix up padding/margin which results in "unexpected" behavior. Let's say you want to create header, content, and sidebar elements. On top of that, you want to add content in those elements without messing with the parent elements. You need to set a specific height for your header (px, % etc.), you'll also need to set widths for your content and sidebar elements. When working with the content within these elements, I typically use another element which acts as a "container" for your content. Steer clear from redefining the size of the "container" element, because you would have already defined this in your parent element. This way, you are free to use margin, padding freely without affecting the size of the parent element... if that made any sense ;)

• Clear your floats: To position your content and sidebar, or other column type elements you are going to have to use the float property on one or more of your elements. An important thing to keep in mind when using float is that you should clear them after you've finished a "float set". Meaning, if you have 3 columns, all with the float:left properties set, you should clear them after the set and NOT after each column. It depends on the layout but typically this way you'll control over floats and you won't run the risk of unexpectedly floating other elements that don't need it.

• When in doubt, reset your margin/padding: Differences in browsers are frustrating to say the least. You can help combat this by destroying browser default properties if they are not defined. I always find that if reset the margin/padding to 0 for a questionable element, I can easily correct spacing issues.

• Use the cascade, don't re-define: Remember that if you've already defined a bunch of css properties, and you are working within a child element, you don't need to redefine properties. Children inherit their parents properties so only define differences.

This will continue to make sense the more you work with it, but I hope this will provide you with some points to keep in mind when structuring a CSS layout. There are some links above that are great resources as well, but I thought I should share some of things I personally think of while working in CSS.

Acorn