HTML. Columns in a single line

Question

How to build a column in a row?

Now the columns are vertically one after the other.

example:

█

But I need to build them horizontally.

█ █ █

This is a link to the source code.

I found several questions that deal with the same on SO, have you gone through those???? — verisimilitude, Jun 23 '12 at 11:13

Simon Dorociak · Answer 1 · 2012-06-23T11:24:55.283

3

I recommend to you to wrap them to some outer <div> and set float: left property for <div>.

Here is basic example how to do it.

HTML code:

<div class="column">
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

And CSS:

.column {
   width: 160px;
   height: 200px;
   background-color: #eeeeee;
   float: left;
   margin-left: 5px;
   text-align: center;
}

Note: Here is working example in jsfiddle.

Note 2: Also if you want to use this class so just only for <div> element, declare it as div.column.

Updated: Thanks to @poncha for suggestion. Answer updated.

edited Jun 23 '12 at 11:24

answered Jun 23 '12 at 11:04

Simon Dorociak

33,374
10
68
106

1

The id being used is not unique. Would it make more sense to use a class here? – pd40 Jun 23 '12 at 11:09
class should be used here. id [MUST be unique](http://www.w3.org/TR/html4/struct/global.html#adef-id) – poncha Jun 23 '12 at 11:21

score 1 · Answer 2 · edited May 23 '17 at 12:20

Several possible solutions.

1) Use float: left on each of your s which you need to line up on the same row. Optionally, add width to each of those to avoid cluttered content. Include all of the <div>s in a parent container

2) Tile up each of the s horizontally using display: inline

3) Actually this is copied from an earlier SO answers, I've used it many-a-times...

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

https://stackoverflow.com/a/226261/608170

score 1 · Answer 3 · answered Jun 23 '12 at 11:12

semantically seems to me more like a list. do you actually have to take care about IE7? if not I suggest you render a markup like

<ul class="inline-list">
  <li>my content</li>
  <li>my content</li>
  <li>my content</li>
</ul>

and then use via CSS

.inline-list li {
  display: inline-block;
}

here is the fiddle

the list entries behave like block elements then (like a simple div for example) so you can apply width and height and so on... nice about that is that it will automatically do line breaks. (which would not be that easy for floating imho)

for IE7: graceful degradation if displayed as block elements but depends on the use case (maybe you can solve this by using display: inline; but I can not prove this right now)

score 0 · Answer 4 · answered Jun 23 '12 at 11:08

Add float:left to div & fixed width with overflow:hidden property

div { 
    -webkit-column-width: 300px;
    -webkit-column-height: 300px;    
    height: 300px;
    width:300px;
    float:left;
    -webkit-column-gap:0px;
    overflow:hidden;
}

Demo: http://jsfiddle.net/surendraVsingh/52u4W/1/

score 0 · Answer 5 · answered Jun 23 '12 at 11:08

Try this

 <div>
        <div id="one" class="clhr">
             <h3>Column1</h3>
        </div>
        <div id="two" class="clhr" >
             <h3>Column2</h3>
        </div>
        <div id="three" class="clhr">
             <h3>Column3</h3>
        </div>
    </div>

   .clhr {
    border: 1px solid red;
    float: left;
    height: 300px;
    margin-right: 16px;
    width: 200px;
}

HTML. Columns in a single line

5 Answers5