Creating 3 Perfectly Equal Columns That Take Up 100% on The Browser Window Width

Creating 3 Perfectly Equal Columns that take up 100% on the Browser Window Width

Try this:

HTML

<div class="container">
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
</div>

CSS

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}

.container {
width:100%;
}

.column {
width:33.33333333%;
float:left;
}

.column img {
width:100%;
height:auto;
}

Demo

http://jsfiddle.net/andresilich/2p8uk/

Single page demo

http://fiddle.jshell.net/andresilich/2p8uk/show/

CSS3 demo

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}

.container {
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
width:100%;
}

.column {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background-color:#ddd;
}

.column img {
width:100%;
height:auto;
}

Demo

http://jsfiddle.net/andresilich/2p8uk/2/

Single page demo

http://fiddle.jshell.net/andresilich/2p8uk/2/show/


Update: (safari, sorta, fix)
Safari does not equate 33.33% to 100% like other browsers, you can either use my CSS3 demo, which does the sizing automatically through CSS, or you can encase everything inside a container with a 101% width and just hide that extra 1% with overflow:hidden; off of the third image. Try this:

<div class="container">
<div class="inner">
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
<div class="column">
<img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
</div>
</div>
</div>

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}

.container {
width:100%;
}

.inner {
width:101%;
overflow:hidden;
}

.column {
width:33.33333333%;
float:left;
}

.column img {
width:100%;
height:auto;
}

Demo: http://fiddle.jshell.net/andresilich/2p8uk/4/

css divide width 100% to 3 column

A perfect 1/3 cannot exist in CSS with full cross browser support (anything below IE9). I personally would do: (It's not the perfect solution, but it's about as good as you'll get for all browsers)

#c1, #c2 {
width: 33%;
}

#c3 {
width: auto;
}

Best way to represent 1/3rd of 100% in CSS?

Now that calc is widely supported among modern browsers, you can use:

#myDiv {
width: calc(100% / 3);
}

Or you can use this as a fallback if your browser wouldn't support it:

#myDivWithFallback {
width: 33.33%;
width: calc(100% / 3);
}

sticking a certain column to right of browser window

Ok folks. Here's how you do it, create a function that you can call onResize in the body tag. Create a table with a header row that colspans over 3 of the columns that will be unused, make it nowrap (important). Get the size of the total width viewport and set the first td width to that, it was actually easier than I thought:

<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function doColWidths(){
$("td:first").css("width",$(window).width());
}
</script>
</head>
<body onresize="doColWidths()">
<table>
<tr>
<td colspan="3" nowrap="nowrap"></td><td></td>
</tr>
<tr>
<td id="col1">Col1</td>
<td id="col2">Col2</td>
<td id="col3">Col3</td>
<td id="col4">Col4</td>
</tr>
</table>
</body>
</html>

I hope this helps someone out in the future.

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
overflow: hidden;
}

[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
display: table;
}

[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}


Related Topics



Leave a reply



Submit