CSS position two columns in a div

Question

I have two <div> inside of a container. They act as a left and right column. The right column will vary in height, while the left column is just one image and some text.

How can I position these correctly without using float and clearing div hacks? Use of these styles means I will need extra HTML and usually excessive CSS.

jsFiddle where the columns do not behave nicely at all. They should both start at the top of the container div.

I assume that you could do this with display: inline-block. But when I do this one of the columns usually has strange vertical positioning.

@AspiringAqib as I mentioned in the question, using a float on the right column will require extra CSS since I will then need a clearing div to make sure the container div maintains the height of all its children. That's all extra writing which may not need to be there. — Don P, Dec 10 '12 at 17:43
@DonnyP You can use jquery for it! If i had this problem then i make use of both css and jquery! — Muhammad Talha Akbar, Dec 10 '12 at 17:44
@AspiringAqib your CSS uses a fixed height for the background div. My background div has a variable height. — Don P, Dec 10 '12 at 17:44
man i am saying to use jquery to check the heights of the children elements and find largest of them and assign it to parent! — Muhammad Talha Akbar, Dec 10 '12 at 17:46
you can't write a three or four line code of jquery for your problem? — Muhammad Talha Akbar, Dec 10 '12 at 17:48
No. I'm not going to start writing javascript or jquery for my page styles. Theres going to be a few hundred other engineers that will also be touching this page, and I don't expect them to hunt through few a files to understand how I got one thing to display correctly. CSS is meant to handle the display of almost all your page elements, and you should use it as such. When things start changing on the fly you can use js — Don P, Dec 10 '12 at 17:50

score 3 · Accepted Answer · answered Dec 10 '12 at 17:43

3

You could still use float without any hacks and your HTML-markup like this:

CSS

.container {
    /* this clears the float */
    overflow: hidden;
}

.leftColumn {
    float:left;
}

.rightColumn {
    float:left;
}

I only posted the parts that have changed.

Demo: http://jsfiddle.net/NhS98/

answered Dec 10 '12 at 17:43

insertusernamehere

23,204
9
87
126

Great, this is clean I had no idea overflow: hidden would fix this. Is there a reasonable explanation or is it just a CSS quirk :P – Don P Dec 10 '12 at 17:47
1

@DonnyP "Because you establish a new Block Formatting Context when using overflow with anything ofther then visible" See [Why “overflow: hidden” clears a float?](http://stackoverflow.com/q/4910075/1456376). – insertusernamehere Dec 10 '12 at 17:49

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Simple Fix:

Give float: left; to both .leftColumn, and .rightColumn. To clear the floats, give overflow: hidden; to the .container.

CSS

.container {overflow: hidden;}
.leftColumn, .rightColumn {float: left;}

Fiddle: http://jsfiddle.net/qYGeY/

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 10 '12 at 17:42

Praveen Kumar Purushothaman

164,888
24
203
252

score 1 · Answer 3 · answered Dec 10 '12 at 17:45

1

The reason why display inline-block doesn't work, or doesn't align properly for you, is because inline-block takes in account white spaces.

<div class="container"><div class="leftColumn">abc</div><div class="rightColumn">content</div></div>

See here for working example: http://jsfiddle.net/4NmMq/2/

When you have a whitespace, in this case tabs, in front of the markup, it shows up in the browser, hence why it's not aligned.

answered Dec 10 '12 at 17:45

jValdron

3,408
1
28
44

Thanks jValdron! This is great insight into the behavior of inline-block. I was always curious about those whitespaces :) – Don P Dec 10 '12 at 17:52

score 1 · Answer 4 · answered Dec 10 '12 at 17:46

Make the divs absolute inside a relative div, like so:

.container {
    background: rgb( 240, 240, 240);
    width: 300px;
    position:relative;
}

.leftColumn {
    display: block;
    position: absolute;
    top:0;
    left:0;
}

 .photoHolder {
    width: 40px;
    height: 50px;
    background: rgb(200, 200, 245);
}

.rightColumn {
    display: block;
    width: 250px;
    height: 400px;
    background: rgb( 200, 244, 244);
    position: absolute;
    top:0;
    right:0;
}

http://jsfiddle.net/yArWb/9/ <--Here's a fiddle.

score 0 · Answer 5 · answered Dec 10 '12 at 17:40

0

You could use the display: table-cell; and display: table; CSS properties to do this. No floats. No clearing. vertical-align:top will make sure the content stays positioned at the top of your divs.

jsFiddle example

.container {
    background: rgb( 240, 240, 240);
    width: 300px;
    display:table;
}
.leftColumn {
    display: table-cell;
}
.photoHolder {
    width: 40px;
    height: 50px;
    background: rgb(200, 200, 245);
}
.rightColumn {
    display: table-cell;
    width: 250px;
    height: 400px;
    background: rgb( 200, 244, 244);
    vertical-align:top;
}

answered Dec 10 '12 at 17:40

j08691

204,283
31
260
272

Using tables to display your HTML isn't compatible with a lot of screenreaders, so I can't user it :( Thanks though – Don P Dec 10 '12 at 17:41
1

It's not using tables at all, just CSS. Perfectly valid and semantic. – j08691 Dec 10 '12 at 17:42
You are using tables when you set the display attribute to `table`. – Don P Dec 10 '12 at 17:45
1

@DonnyP float is hack and this solution without float you cant use ... than what do you want to do with .... i guess its `alean:left;` here to do – NullPoiиteя Dec 10 '12 at 17:46
Why the downvote? Is there something incorrect about my example? – j08691 Dec 10 '12 at 17:48

CSS position two columns in a div

5 Answers5

Simple Fix:

CSS

Fiddle: http://jsfiddle.net/qYGeY/