I think similar question must have been asked already, but I don't know how to find it...

I want to create a multi-column HTML layout with autostretching columns. Let's say 2 columns. When there's only one column on a page it fills 100% of container width, when I add a second column of 25% the first one automatically squeeze to 75%.

<div class="wrapper">
    <div class="content">...</div>
    <div class="sidebar">...</div>
</div>

I'm sure this can be done with JavaScript (checking if second column exists), but what about plain CSS? Is it actually possible? I need to support IE 9+.

I think similar question must have been asked already, but I don't know how to find it...

I want to create a multi-column HTML layout with autostretching columns. Let's say 2 columns. When there's only one column on a page it fills 100% of container width, when I add a second column of 25% the first one automatically squeeze to 75%.

<div class="wrapper">
    <div class="content">...</div>
    <div class="sidebar">...</div>
</div>

I'm sure this can be done with JavaScript (checking if second column exists), but what about plain CSS? Is it actually possible? I need to support IE 9+.

• javascript
• html
• css

Share Improve this question Follow asked May 13, 2015 at 10:28 artemeanartemean 85511 gold badge1010 silver badges2525 bronze badges 2

• 1 Have you looked into using flexbox? You could then use a fallback for IE9. – evolutionxbox Commented May 13, 2015 at 10:29
• @evolutionxbox, yes, but I need full IE9+ support, so flexbox won't work. – artemean Commented May 13, 2015 at 15:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This can be done with css selectors:

  .content{
    width:100%;
  }
  .sidebar{
    width:25%;
  }
  .content:not(:only-child){
    width:75%;
  }

Pen: http://codepen.io/vandervals/pen/zGqorj

I think this is far more elegant than the table solution and the support is really wide: http://caniuse./#search=only-child

You need something like following. Use display:table to parent and display:table-cell to child element.

.wrapper{
    display:table;
    width: 100%;
}

.content{
    display:table-cell;
    background-color:yellow;
}

.sidebar{
    display:table-cell;
    width:25%;
    background-color:blue;
}

<div class="wrapper">
    <div class="content">...</div>
    <div class="sidebar">...</div>
</div>

Hope it helps.

I know you ask for a CSS solution, but here is a simple jQuery script to have a dynamic sizing (no matter the number of column, it will be divided and fit in the row).

$(document).ready(function() {
	$('.row').each(function(k, v) {
		var col =  $('.column', this),
			colNumber  = col.length,
			percent = 100 / colNumber;
			console.log(percent);
		col.css({'width' : percent + '%'});
	});	
});

* {
	box-sizing: border-box;
}
.wrapper {
	width: 960px;
	margin: 0 auto;
}
.column {
	float: left;
	height: 200px;
	margin: 0 auto;
	border: 1px solid black;
	background-color: orange;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
	</div>
	<div class="row">
		<div class="column"></div>
	</div>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
</div>