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
Why Is The First Element Always Blank in My Rails Multi-Select, Using an Embedded Array
Semantically, Which Is More Correct: a in H2, or H2 in A
Tools for Obfuscating HTML and CSS
How Move 'Nav' Element Under 'Navbar-Brand' in My Navbar
How to Specify The Order of CSS Classes
Why Are Bootstrap's Form Elements Rendered Terribly with Struts2-Boostrap-Plugin
Flexbox - Fill Remaining Space
Why Is Box-Sizing Acting Different on Table Vs Div
How to Set The <Img> Tag with Basic Authentication
CSS Attribute Selector Does Not Work a Href
Div with Horizontal Scrolling Only
Are Nested HTML Comments Possible
What Is Aria-Label and How to Use It
Inline Style to Act as: Hover in CSS