CSS Divide Width 100% to 3 Column

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;
}

Divide Width of Element Between Child Divs With CSS

You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.

For a structure like this:

   <div class="outer">
<div class="middle">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
<div class="inner">Item 3</div>
<div class="inner">Item 4</div>
</div>
</div>

Use this CSS:

div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}

A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.

This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.

Let me know if you need more sample code than that!

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/

divide response width into 4 columns in css

want to split the code below into 4 columns width: 25%; but I only achieved 3 columns

When specifying the width of the elements, you must consider the given margin property

In your situation: width: calc(100% / 4 - 10px);

Result

.list {  width: 100%;  display: block;}
.item { position: relative; width: calc(100% / 4 - 10px); height: 148px; font-size: 12px; overflow: hidden; background-color: red; float: left; margin: 5px;}
<div class="list">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div>  <div class="item">8</div></div>

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);
}

Want to divide this div into three equal columns so that list data will look like 3 table

If you want to create a table-like looking container I would suggest to use the following style:

.card{
grid-auto-flow: row;
grid-template-columns: 1fr 1fr 1fr;
display: grid;
}

This will divide card child elements to groups of 3 in the same size.

lET that the first column with have 50% width of the entire width you can do:

  grid-template-columns: 2fr 1fr 1fr;

three li with equal width

Use display:flex in ul and flex: 1 in li

body {
background: lightblue
}

ul {
list-style: none;
padding: 0;
position: fixed;
bottom: 25px;
left: 5%;
width: 90%;
display: flex;
background: white;
}

li {
flex: 1;
box-shadow: 0 0 0 1px black
}
<ul>
<li><a href="">Phone</a></li>
<li><a href="">Imprint</a></li>
<li><a href="">Email</a></li>
</ul>

How can I have a div layout split into three columns with rows in the middle column?

if you are using bootstrap, given the tag is in the question, and you have a default class from bootstrap container-fluid, then you just need to use the already defined bootstrap classes .row/col-*-* and setting display:flex in .row

.row {  display: flex}.one {  background: blue;}.three {  background: orange;}.four {  background: purple;}.five {  background: yellow;}.six {  background: green;}.seven {  background: red;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><div class="wrapper container-fluid">  <div class="row">    <div class="col-xs-2 one">ONE</div>    <div class="col-xs-8 two">      <div class="three">THREE</div>      <div class="four">FOUR</div>      <div class="five">FIVE</div>      <div class="six">SIX</div>    </div>    <div class="col-xs-2 seven">SEVEN</div>  </div></div>


Related Topics



Leave a reply



Submit