Hi, I would like to know the best way to put multiple divs in one line.

I've been using float: left for that for a while now. The code would look like that:

 <div>
     <div style="float: left">Block of text here</div>
     <div style="float: left">Block of text here</div>
     <br style="clear: both" />
 </div>

Normally I would have the floated divs with a fixed width. This method requires an extra br and a wrapper-div.

  • The "display: inline" method would make me lose some freedom with styling.
  • If I float one div and just put a margin in the other one, like for example in Dreamweaver 2-Column Templates, then there will be a problem is I float an element in the unfloated div.
  • List item

'

 <div id="wrapper">
  <div style="float: left; width: 230px;" id="one">Content Here</div>
  <div style="margin-left: 230px;">
   No Problem with this text
  <div style="float: left;">This jumps down under the "one" in a vertical sense</div>
  </div>
  </div>

'

Is there a better method to accomplish the goal?

Thanks.

P.S. : Feel free to link to sites with examples, but I just want to know the best method and hear you ideas.

8 answers

Emily G 620
2
points

I use floats with overflow hidden to clear the float and zoom to invoke hasLayout and clear the float for ie6.

.wrapper {overflow:hidden;zoom:1;}
.wrapper p {float:left;}

<div class="wrapper">
     <p>Block of text here</p>
     <p>Block of text here</p>
</div>    
Answered almost 8 years ago by Emily G
hasenj 5
1
point

There is such a thing as an inline-block, however, it doesn't work on a div; you'll have to use a span.

<span style="display:inline_block"> content goes here </span>

This is much better than floating a div. Floated divs are not very stable or robust; they generally don't scale well, and you end up having to put a
or an empty div or whatever other quirks (which I don't remember right now).

Answered almost 8 years ago by hasenj
1
point

Your first method is much better in my opinion. Although, you don't necessarily have to use the <br/> to clear the float. You can use any block element whatsoever, so maybe consider clearing the float on the element that naturally follows your divs.

My favourite site for understanding floats is Floatutorial, which has numerous examples on the best way to achieve what you want to do.

Answered almost 8 years ago by Stuart Memo
1
point

The HTML:

  <div id="wrap">
     <div id="content">content</div>
     <div id="sidebar">sidebar</div>
  </div>

The CSS:

#wrap { width: 500px; overflow: auto; }
   #content { float: right; width: 300px; }
   #sidebar { float: left; width: 200px; }

And you should be good to go. I prefer overflow: auto; if you need to self-clear because it's just that tiny bit more safe than using overflow: hidden;. Of course, you could also just float the parent container (either direction) and it would correctly contain the children.

If you have a naturally occurring element after these in the HTML, like a footer, you could just clear them there too.

Also, there's really no need to use display: inline on floated divs unless you're putting a margin on the same side as the float. For example, if you float: left; margin-left: 20px; you will encounter the double-margin bug.

Answered almost 8 years ago by Nate Kennedy
0
points

If the aim is to have the containing element wrap around the columns (for instance to show a background colour or image behind it all) then you can use overflow:hidden on the containing element instead of having to use a BR, the clearfix method or some other block element:

HTML:

<div id="container">
     <div class="column w640">Column 1 content</div>
     <div class="column w320">Column 2 content</div>
</div>

CSS:

#container {
     overflow:hidden;
     width:960px;
     background-color:#ff0000;
}

.column {
     float:left;
     display:inline;
}

.w320 {
     width:320px;
}

.w640 {
     width:640px;
}

I've also used a couple of classes instead of unique id's for the columns, this way you can specify the broad behaviour of the columns such as float etc but then specify the widths separately.

One thing to note when using overflow:hidden is that if you specify a height on the containing element then it will of course fix the height of that element and any content that goes beyond that height will not be visible. But as long as you're not specifying a height for the containing element then it's a good solution.

Answered almost 8 years ago by Rick Curran
-1
points

Change the divs to spans.

Answered almost 8 years ago by Andrew Pennebaker
-2
points

I would like to draw attention to this blog post:

http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html

It shows a simple way of making multiple column layout and it is very easy to costumize. I've been using it a couple of times and I'm fairly excited about the technique.

Answered almost 8 years ago by Dan Storm
-3
points

Floating is a great way to accomplish a two-column layout, so you are pretty much using a good method already. Your code however could use a little cleaning up.

First of all, it's pretty bad practice to use the style attribute in your html. Using an external css file makes your code easier to maintain, and read.

Put this in between the head element of your html document.

<link rel="stylesheet" type="text/css" href="style.css"/>

Your html:

<div id="container">
  <div id="content">Content here</div>
  <div id="sidebar">No problem with this text">
  <div id="footer">Footer here</div>
</div>

Your css (style.css)

#content {
  float:left;
  width:230px;
  display:inline; 
}

Read this to see why I display put display:inline; there (it has to do with an IE bug).

#sidebar {
  float:left;
  display:inline;
  width:150px;
}

#footer {
  clear:both;
}

In addition to the answer right after me, css-tricks.com has a pretty nice article on floats:

All about floats

Answered almost 8 years ago by Jesse Vlasveld