composed divs on the same line

Question

hey guys,

I'm building a site and I have a proble.

I have a composed divs :

<div id="content">
<div id="left">
 <div id="leftcontent">...</div>
</div>
<div id="center">
 <div id="centercontent">...</div>
</div>
<div id="right">
 <div id="rightcontent">...</div>
</div>

How can I put left, center, and right in the same line ?

which code should I add ?

thanks!

Answer 1

You can use float css attribute like:

#left   { float: left }
#center { float: left }
#right  { float: right }

Answer 2

Why are you using divs? A div has display of block, but a span would work better, as it is inline, then the float attribute suggested by Ivan would work well.

Answer 3

This CSS should do the trick:

#left {
  width: 20%;
  float: left;
}

#center {
  width: 60%;
  float: left;
}

#right {
  width: 20%;
  float: left;
}

Adjust widths as appropriate.

Answer 4

An alternative method is to use a css grid framework. Here are some of the popular ones:

1. http://960.gs/
2. http://www.blueprintcss.org/
3. http://developer.yahoo.com/yui/grids/

My favorite happens to be: Object Oriented CSS

Using a css based grid system is somewhat recommended as they are very well tested to work across multiple browsers.

One possible negative effect, is that you have to structure your markup in a way that is specific to the framework you choose.

Answer 5

The other comments answer your question, but watch out that you're not starting the descent into div hell...divs doing nothing more than contain divs can be a code smell.