91

My only problem is making them line up three-across and have equal spacing. Apparently, spans can not have width and divs (and spans with display:block) don't appear horizontally next to each other. Suggestions?

<div style='width:30%; text-align:center; float:left; clear:both;'> Is what I have now.

Thomas Owens
  • 114,398
  • 98
  • 311
  • 431
  • 2
    Why don't you want to use a table? – DOK Oct 22 '08 at 14:26
  • 64
    Because the data is not tabular. – Thomas Owens Oct 22 '08 at 14:28
  • 11
    The answers below are suitable, but consider that using a table will give you less of a headache if you end up making things more complicated. It's OK to use a table if it makes your work easier. Be pragmatic! :-) – Rahul Oct 22 '08 at 14:32
  • 5
    seriously, don't use a table. This kind of thing is easy with CSS. – Sam Murray-Sutton Oct 22 '08 at 14:52
  • +1 on don't use a table. This is really easy. Being pragmatic about Tables As Layout is when you are having serious browser compatibility problems. – MDCore Oct 22 '08 at 15:28
  • You already have the answer in your post. You should just not use clear:both; there! It is specifically to not allow the other divs in the same line. clear after them, so new stuff doesn't get in the same line. – ypnos Oct 22 '08 at 15:49
  • 27
    "It's OK to use a table if it makes your work easier." is *absolutely terrible* advice. Please ignore! :) – Bobby Jack Oct 22 '08 at 15:57
  • You can check this question, http://stackoverflow.com/q/9277311/621951 – Günay Gültekin Nov 03 '14 at 12:16

10 Answers10

79

You can use divs with the float: left; attribute which will make them appear horizontally next to each other, but then you may need to use clearing on the following elements to make sure they don't overlap.

jmcd
  • 4,269
  • 5
  • 36
  • 36
  • 19
    Actually, you can just set `overflow: hidden`. See: http://stackoverflow.com/questions/323599/css-layouts-how-to-position-two-divs-horizontally-within-another-div/324553#324553 – David Wolever Feb 15 '10 at 00:03
  • 2
    I find that this can break layout in subsequent divs. E.g., if I use your solution, and then try to `padding-left` in the div to the right, it gets ignored. – Sebastian Mach Aug 25 '15 at 12:22
  • 3
    There's no reason to over-think: `
    ` should work fine.     – zoltar Dec 09 '15 at 08:16
  • 1
    using float introduce a whole bunch of new problems. `overflow: hidden` is the best solution. – saran3h Dec 23 '18 at 17:49
40

You can use

.floatybox {
     display: inline-block;
     width: 123px;
}

If you only need to support browsers that have support for inline blocks. Inline blocks can have width, but are inline, like button elements.

Oh, and you might wnat to add vertical-align: top on the elements to make sure things line up

runeh
  • 3,771
  • 1
  • 21
  • 16
  • 1
    vertical align does not work on block level elements. In this case we're talking about elements whose display has been set to inline-block. – runeh Oct 23 '08 at 08:45
  • 1
    inline-block is now [supported](http://www.quirksmode.org/css/display.html) in every [A grade browser](http://yuilibrary.com/yui/docs/tutorials/gbs/) except IE6/7, but there's a [hack](http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html) to get inline-block to work in IE6/7. – Alexander Bird Oct 11 '11 at 16:00
13

My answer:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Why?

Technically, a Span is an inline element, however it can have width, you just need to set their display property to block first. However, in this context, a div is probably more appropriate, as I'm guessing you want to fill these divs with content.

One thing you definitely don't want to do is have clear:both set on the divs. Setting it like that will mean that the browser will not allow any elements to sit on the same line as them. The result, your elements will stack up.

Note, the use of display:inline. This deals with the ie6 margin-doubling bug. You could tackle this in other ways if necessary, for example conditional stylesheets.

I've added a wrapper (#whatever) as I'm guessing these won't be the only elements on page, so you'll almost certainly need to segregate them from the other page elements.

Anyway, I hope that's helpful.

Sam Murray-Sutton
  • 1,439
  • 1
  • 13
  • 22
  • This didn't seem to work when I cut and paste it into jsfiddle – Jamie Fristrom Aug 20 '12 at 18:09
  • 1
    Sorry, typo there; I should have put a semi-colon after each of those lines, then it does work; I've edited accordingly. Although having reviewed this question again, I would suggest the OP needs to add a little more code to his example. As the answers here show, there a variety of approaches that can be used here and exactly what you use will depend on the context. – Sam Murray-Sutton Aug 23 '12 at 13:13
4

you can do: 

<div style="float: left;"></div>

or 

<div style="display: inline;"></div>

Either one will cause the divs to tile horizontally.

Jeremy B.
  • 9,168
  • 3
  • 45
  • 57
3

I would do it something like this as it gives you 3 even sized columns, even spacing and (even) scales. Note: This is not tested so it might need tweaking for older browsers.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>
Ulf Gjerdingen
  • 1,414
  • 3
  • 16
  • 20
monkey do
  • 306
  • 1
  • 4
3

I would use:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

It's the first time I use this 'code tool' from overflow... but shoul do it by now...

talevineto
  • 51
  • 4
1

What you might like to do is look up CSS grid based layouts. This layout method involves specifying some CSS classes to align the page contents to a grid structure. It's more closely related to print-bsed layout than web-based, but it's a technique used on a lot of websites to layout the content into a structure without having to resort to tables.

Try this for starters from Smashing Magazine.

marcus.greasly
  • 703
  • 4
  • 15
0

Look at the css Float property. http://w3schools.com/css/pr_class_float.asp

It works with block elements like div. Alternatively, what are you trying to display, tables aren't evil if you're really trying to show a table of some information.

Nick
  • 9,113
  • 4
  • 25
  • 29
0

I would try to give them all display: block; attribute and using float: left;.

You can then set width and/or height as you like. You can even specify some vertical-alignment rules.

Ulf Gjerdingen
  • 1,414
  • 3
  • 16
  • 20
d1rk
  • 348
  • 2
  • 10
0
    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

another... try to use float: left; or right;, change the width for other values... it shoul work... also note that the 10% that arent used by the div its betwen them... sorry for bad english :)

talevineto
  • 51
  • 4