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.

8
  • 2
    Why don't you want to use a table?
    – DOK
    Commented Oct 22, 2008 at 14:26
  • 65
    Because the data is not tabular. Commented Oct 22, 2008 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
    Commented Oct 22, 2008 at 14:32
  • 6
    seriously, don't use a table. This kind of thing is easy with CSS. Commented Oct 22, 2008 at 14:52
  • 28
    "It's OK to use a table if it makes your work easier." is absolutely terrible advice. Please ignore! :)
    – Bobby Jack
    Commented Oct 22, 2008 at 15:57

10 Answers 10

81

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.

4
  • 19
    Actually, you can just set overflow: hidden. See: stackoverflow.com/questions/323599/… Commented Feb 15, 2010 at 0: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. Commented Aug 25, 2015 at 12:22
  • 3
    There's no reason to over-think: <div style="display: in-line"></div><div style="display: in-line"></div> should work fine.
    – zoltar
    Commented Dec 9, 2015 at 8:16
  • 1
    using float introduce a whole bunch of new problems. overflow: hidden is the best solution.
    – saran3h
    Commented Dec 23, 2018 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

2
  • 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
    Commented Oct 23, 2008 at 8:45
  • 1
    inline-block is now supported in every A grade browser except IE6/7, but there's a hack to get inline-block to work in IE6/7. Commented Oct 11, 2011 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.

2
  • This didn't seem to work when I cut and paste it into jsfiddle Commented Aug 20, 2012 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. Commented Aug 23, 2012 at 13:13
3

you can do:

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

or

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

Either one will cause the divs to tile horizontally.

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>
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...

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.

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.

2
  • But it's not a table. They are just three things that I want to appear next to each other. Commented Oct 22, 2008 at 14:30
  • 404 page not found Commented Nov 4, 2018 at 8:51
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.

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.