How can I force width to elements with display: table-cell?
<div id="wraper">
<div id="left">
<p>Left</p>
</div>
<div id="right">
<p>Right and Hide</p>
</div>
</div>
My CSS doesn't do anything, width of #left and #righ elements isnt affected.
#wraper {
display: table-wrap;
}
#left {
border: 1px solid red;
display: table-cell;
width: 30%;
}
#right {
border: 1px solid blue;
display: table-cell;
width 70%;
}
it just works fine for me
JS Fiddle: https://jsfiddle.net/qq0t46pt/1/
HTML:
<div id="wraper">
<div id="left">
<p>Left</p>
</div>
<div id="right">
<p>Right and Hide</p>
</div>
</div>
CSS:
#wraper {
display: table-wrap;
}
#left {
border: 1px solid red;
display: table-cell;
width: 30%;
}
#right {
border: 1px solid blue;
display: table-cell;
width 70%;
}
table-wrap is not a valid display value. See MDN
Use display:table.
Then you need to give the table a width so the child elements can calculate their own width accordingly.
#wraper {
display: table;
width: 70%; /* or your chosen value */
margin: auto;
}
#left {
border: 1px solid red;
display: table-cell;
width: 30%;
}
#right {
border: 1px solid blue;
display: table-cell;
width 70%;
}
<div id="wraper">
<div id="left">
<p>Left</p>
</div>
<div id="right">
<p>Right and Hide</p>
</div>
</div>
Related
I am trying to achieve this layout.
left column fixed size
right column fluid, it may have x number of elements inside, for example up to 4 divs 50px wide (this is done dynamically) so it must be max 200px wide, or if it has 3 such elements, then it must be 150px wide...
center column fluid, takes all the rest space
The closest I have comes is this:
#container {
overflow:hidden;
width: 100%;
}
#leftcol {
border: 1px solid #0f0;
float: left;
width: 80px;
}
#rightcol {
border: 1px solid #0f0;
float: right;
}
#centercol {
border: 1px solid #000;
margin-left: 80px;
}
.box{
width:50px;
height:20px;
background:red;
float:left;
}
<div id="container">
<div id="leftcol">
fixed 80px
</div>
<div id="rightcol">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div id="centercol">
fluid center
</div>
</div>
but center fluid is not correct width.
I can change some html if it will be easier to achieve desired effect.
You can do it with the Flexbox:
body {margin: 0}
#container {
display: flex; /* displays flex-items (children) inline */
overflow: hidden;
}
#leftcol {
border: 1px solid #0f0;
width: 80px;
}
#centercol {
flex: 1; /* takes the remaining horizontal space */
border: 1px solid #000;
}
#rightcol {
display: flex;
border: 1px solid #0f0;
max-width: 200px; /* adjust to your needs */
}
.box {
width: 50px;
height: 20px;
background: red;
}
<div id="container">
<div id="leftcol">
fixed 80px
</div>
<div id="centercol">
fluid center
</div>
<div id="rightcol">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</div>
How can I make the 3 child divwith class .box have the same width while fluidly occupying the entire parent container div while staying inline.
Here is a fiddle
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
margin: 1em;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
use CSS flexbox for that
#container {
width: 20em;
display: flex;
background: red;
text-align: center;
}
.box {
flex: 1;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
OR
use inline-block as you already are using, with a few tweaks.
* {
box-sizing: border-box
}
#container {
width: 20em;
background: red;
text-align:center
}
.box {
font-size: 16px;
display: inline-block;
width: calc(100% / 3);
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>
OR
use CSS tables for old browsers support
#container {
width: 20em;
display: table;
background: red;
text-align: center;
}
.box {
display:table-cell;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
display:table version:
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container">
<div class="box">test
<br/>+ 1line ?</div>
<div class="box">test</div>
<div class="box middle">test</div>
</div>
table-layout:fixed will fix width value you set, for main container and children.
if children(table-cell) have no width set, they will spray evenly
#container {
width: 20em;
background: red;
text-align: center;
display: table;
table-layout: fixed;
border-spacing: 1em;
/* instead the margin:1em; you applied to children */
}
.box {
display: table-cell;
;
border: 1px solid #000;
}
.middle{vertical-align:middle;}
<div id="container">
<div class="box">test test test test </div>
<div class="box">test</div>
<div class="box">test</div>
</div>
<hr/>
<div id="container"class=" bis ">
<div class="box">testtesttesttest testtesttest</div>
<div class="box">test</div>
<div class="box">test</div>
</div>
If you want to do this with display: inline-block you can set equal width of 33.33% on each .box, remove white space from HTML and also add box-sizing: border-box.
* {
box-sizing: border-box;
}
#container {
width: 20em;
background: red;
text-align: center;
}
.box {
display: inline-block;
width: 33.33%;
border: 1px solid #000;
}
<div id="container">
<div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>
I have a parent div of unknown width (the width depend on some screen width calculations). The number of the child divs is 4 and are floated so that they are horizontally aligned. The 1st, 2nd and 4th are good candidates for fixed width value. However, the 3rd element can stretch to fit the remaining space in the parent div.
I don't know why the approach of display:table; for parent and display:table-cell for children didn't work for me. The three element's width is fixed except for the concerned div where I also tried width:auto to no avail.
<div class="parent">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
</div>
A minimal CSS:
.parent
{
width: 100%;
display:table;
}
.first
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.second
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
.third
{
height: 80px;
float: left;
display: table-cell;
}
.fourth
{
width: 80px;
height: 80px;
float: left;
display: table-cell;
}
Your usual help is much appreciated.
You can do this with Flexbox, so if you add flex: 1 to one child div it will take rest of free width
.parent {
display: flex;
border: 1px solid black;
}
.child {
border: 1px solid black;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
flex: 1;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
Or you can use CSS Table with table-layout: fixed here is Browser support
.parent {
display: table;
width: 100%;
border: 1px solid black;
table-layout: fixed;
}
.child {
border: 1px solid black;
display: table-cell;
margin: 5px;
padding: 5px;
width: 50px;
}
.long {
width: 100%;
}
<div class="parent">
<div class="child">Div 1</div>
<div class="child">Div 2</div>
<div class="child long">Div 3</div>
<div class="child">Div 4</div>
</div>
For IE9+
You can use inline-block and calc() for this.
Snippet
body {
margin:0
}
.parent {
border:solid black;
font-size:0; /*fix inline-block gap*/
}
.child {
border: 1px solid red;
margin: 5px;
width:100px;
display:inline-block;
font-size:16px /*restore font -size*/
}
.calc{
width: calc(100% - 348px)
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child calc">three</div>
<div class="child">four</div>
</div>
For IE8+
you can use display:table/table-cell
Snippet
body {
margin: 0
}
.parent {
border: solid black;
display: table;
table-layout: fixed;
width: 100%;
/*optional*/
border-collapse:separate;
border-spacing:5px;
box-sizing:border-box;
}
.child {
border: 1px solid red;
width: 100px;
display:table-cell;
}
.big {
width:100%
}
<div class="parent">
<div class="child">one</div>
<div class="child">two</div>
<div class="child big">three</div>
<div class="child">four</div>
</div>
I have several divs in a container, organized in a row.
$(document).ready(function() {
$('#swap').click(function() {
$('#container').find('div.blue').each(function() {
$(this).removeClass('blue');
$(this).addClass('green');
});
});
});
#container {
border: 1px solid black;
border-right: 0px;
width: 500px;
min-height: 40px;
}
#left {
float: left;
}
#right {
float: right;
}
.purple {
background-color: #9471AB;
width: 70px;
}
.red {
background-color: #D48A8A;
width: 40px;
}
.green {
background-color: #A4B995;
width: 50px;
}
.blue {
background-color: #95AEB9;
width: 75px;
}
.red,.green,.blue,.purple {
height: 40px;
float: left;
box-sizing: border-box;
border-right: 1px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="left">
<div class="purple">
</div>
<div class="purple">
</div>
<div class="purple">
</div>
</div>
<div id="middle">
<div class="red">
</div>
</div>
<div id="right">
<div class="blue">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
</div>
<br/>
<button id="swap">Swap</button>
.purple, .blue, .green are defined widths, but not .red. For this example, I've given it a width.
I'd like .red to have a width equal to the gap between #left and #right. I could put it underneath all of them and make the width equal to container width, but I'm looking for something that's friendly with text.
I've put a button that changes all .blue to .green. .red should stretch its width accordingly so there's no gap. Some scenarios might have two .green and one .blue on the right, some might be three .blue or three .green., etc. It should be dynamic and not calculated against the width of other classes.
flexbox solution
$(document).ready(function() {
$('#swap').click(function() {
$('#container').find('div.blue').each(function() {
$(this).removeClass('blue');
$(this).addClass('green');
});
});
});
* {
box-sizing: border-box;
}
#container {
border: 1px solid black;
border-right: 0px;
width: 500px;
margin: 10p auto;
display: flex;
justify-content: space-between;
}
#left {
display: flex;
}
#middle {
display: flex;
flex:1;
}
#right {
display: flex;
}
.purple {
background-color: #9471AB;
width: 70px;
}
.red {
background-color: #D48A8A;
flex:1;
}
.green {
background-color: #A4B995;
width: 50px;
}
.blue {
background-color: #95AEB9;
width: 75px;
}
.red,.green,.blue,.purple {
height: 40px;
border-right: 1px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="left">
<div class="purple">
</div>
<div class="purple">
</div>
<div class="purple">
</div>
</div>
<div id="middle">
<div class="red">
</div>
</div>
<div id="right">
<div class="blue">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
</div>
<br/>
<button id="swap">Swap</button>
Update
http://jsfiddle.net/w4rxg7v3/1/
This approach lets you have dynamic widths of left and right, and middle fills in the rest.
<div class="middle">
<div class="left"></div>
<div class="right"></div>
<p>Content for Middle: cupiditate blanditiis dolorum natus!</p>
</div>
============================================================
http://jsfiddle.net/w4rxg7v3/
You can accomplish this using float and calc().
Make 1st div float:left, right div to float:right, then make middle one float either left or right. Then set its width to calc( 100% - sumofwidthothertwodivs)
body {
min-width: 500px;
}
.left,.middle,.right {
height: 80px;
}
.left {
background-color: blue;
width: 200px;
float: left;
}
.middle {
width: calc( 100% - 400px ) ;
float: right;
background-color: red;
}
.right {
background-color: green;
float: right;
width: 200px;
}
I have the following html markup:
.container {
border: 1px solid green;
}
.right {
border: 1px solid #000;
float: right;
width: 40px;
}
.left {
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
<br/>
multiple rows
</div>
</div>
</div>
As you can see right block looks ugly. How could I make right element fluid height 100%?
Add the rule height:100% the right div, and remove float:right. I changed it to position:absolute, so that you didn't need the container's height.
.container {
border: 1px solid green;
position: relative;
width: 100%;
}
.right {
border: 1px solid #000;
width: 40px;
height: 100%;
position: absolute;
right: 0;
}
.left {
display: block;
border: 1px solid red;
overflow: hidden;
margin-right:40px;
}
<br><br><div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
</div>
</div>
</div>
If your application will run in a modern browser, then using flexbox is a good way to go: http://jsfiddle.net/2hn9zgog/.
HTML:
<div class="container">
<div class="right">Right</div>
<div class="left">
Left fluid
<br/>multiple rows
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
outline: 1px dotted gray;
}
.right {
order: 2;
flex: 0 0 auto;
border: 1px solid green;
}
.left {
flex: 1 0 auto;
border: 1px solid red;
}
add clear: both; after floated element.
<div class="right"></div>
<div style="clear: both"></div>
Add
html, body{
height: 100%;
min-height: 100%;
}
.your-container{
height: 100%;
}