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
CSS3 Transitions Want to Add a Colour and Fade It Away
How to Have Multiple Svg Images in a Single File
Point One Style Class to Another
Text-Align: -Webkit-Center Vs Text-Align: Center
@Media: If Samsung Galaxy S4 Is 1920X1080
How to Detect CSS Inheritance Source
Input[Type='Text'] CSS Selector Does Not Apply to Default-Type Text Inputs
Visibility:Hidden in Angular 2
Does Source-Maps in Style Tags Work
Override Bootstrap Container Width
Default Web Page Width - 1024Px or 980Px
React Native - Why Padding Does Not Work