CODEWITHSUNDEEP
htmlcss
mbuff24
mbuff24

Reputation: 425

Turning 1 column into 2

I ran into a problem where I am only give a container div with around 10 divs inside. I would like to find a way to turn this 1 column of divs into 2 columns without adding additional divs (ie. not adding divs for left column or right columns). I can and most preferably would like to find a CSS solution.

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Ideal output:

1      2
3      4
5      6

I tried fooling around with floating but it didn't work out too well. Please let me know. Thanks!

Upvotes: 0

Views: 91

Answers (4)

Philip Bevan
Philip Bevan

Reputation: 347

i know that the more suitable solution has already been posted here and support is heavily lacking for the proposal that I am going to make but you can separate any div into any number of columns using the new ccs3 column-count and column-gap properties.

A link to this can be seen here:

http://www.quirksmode.org/css/multicolumn.html

I am quite disappointed that support for this is so low because these properties will allow for true 'print-style' layouts and if supported we would not have to clear:both to make our parent div and child divs align correctly. i know that i am opening up a can of worms here but this is by far the best option to use.

I hear so many people asking about column layouts so why oh why can we not have support to use technology that is already out there...?? Sorry for the rant

Upvotes: 0

Andrey Kuzmin
Andrey Kuzmin

Reputation: 4479

I think display: inline-block is better than float, because heights of elements might vary. But you'll need to set font-size to 0 on .container and then reset it on elements.

jsfiddle example

Upvotes: 0

Christopher Marshall
Christopher Marshall

Reputation: 10736

Set your inner divs to half the width of your container and float them. e.g.

.container { width:600px;}

.container div {
   width:300px;
   float:left;
}

Working example http://jsfiddle.net/k2tQG/

Upvotes: 1

MarcinJuraszek
MarcinJuraszek

Reputation: 125610

Like that: http://jsfiddle.net/Qzj2d/ ? That is the simplest solution (not necessary the prettiest one).

Upvotes: 4

Related Questions