I want to make dynamic width columns inside of dynamic width div. Everything seems to be working just fine, but if I want to make the sum of column widths 100%, the third column jumps down even though there is still space. And I can't get rid of the spacing after each column.
Maybe some of you might know why?
Here is my fiddle!
http://jsfiddle.net/vMe5L/
My code:
<style>
.content { width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: inline-table; height: 100%; background-color: red; }
.middle { width: 30%; display: inline-table; height: 100%; background-color: blue; }
.right { width: 47%; display: inline-table; height: 100%; background-color: yellow; }
</style>
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
Thanks in advance, you guys are amazing.
Either float the elements, or remove the whitespace in between. On inline elements (which includes styling them to display: inline-table or inline-block), whitespace is shown too, even if it is collapsed to a single space. So:
<div class="content"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
works fine.
Better to use table and table-cell display.
Demo: http://jsfiddle.net/abhitalks/vMe5L/5/
CSS:
div { box-sizing: border-box; }
.content { display: table; width: 300px; height: 200px; background-color: gray; }
.left { width: 20%; display: table-cell; height: 100%; background-color: red; }
.middle { width: 30%; display: table-cell; height: 100%; background-color: blue; }
.right { width: 50%; display: table-cell; height: 100%; background-color: yellow; }
Update:
If you want to stick to inline-table, then get rid of the white spaces. The best way would to introduce comments:
<div class="content">
<div class="left"></div><!--
--><div class="middle"></div><!--
--><div class="right"></div>
</div>
Try this out:
Fiddle
Changes made,
added css display:table to outer class content, and inner classes changed to display:table-cell;
Related
Here's image displaying my problem
CSS for wrapper is
display: block;
text-align: center;
CSS for each DIV is
margin: 30px 10px;
display: inline-block;
height: 100%;
text-align: center;
width: 30%;
What could be causing this? I tried fiddling with flex but the outcome is the same.
You said you fiddled with flexbox. However to make use of it, you should not just fiddle with it, but study how it works.
To achieve what you want, use display: flex; on the wrapping div and remove height property from your contained divs.
Run this visual example to see how it works:
.parent {
padding: 20px;
background: red;
width: 400px;
height: 100px;
display: flex;
}
.child-1 {
background: yellow;
width: 100px;
}
.child-2 {
background: orange;
width: 100px;
}
<div class="parent">
<div class="child-1">
Hello
</div>
<div class="child-2">
Multi
<br>
Line
<br>
Content
</div>
</div>
This question already has answers here:
Setting div width to 100% minus certain amount of px
(5 answers)
Expand a div to fill the remaining width
(21 answers)
Closed 6 years ago.
I will simulate what i need to achieve.
for example, i want that #2 took the whole space, remaining of 100% - 180px.. how to achieve that?
p.s. seems flexbox is more supported over devices than calc - http://css3clickchart.com/#flexbox
You can use flexbox model as shown below. Adding flex: auto; will allow the right content to use remaining width.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#parent {
display: flex;
height: 100%;
}
#left {
width: 180px;
background-color: hotpink;
}
#right {
flex: auto;
background-color: dodgerblue;
}
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Use css calc
Here with a example.. This might help:
.class {
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}
You can use float: left and overflow: hidden.
aside {
float: left;
width: 30%;
background: beige;
}
article {
overflow: hidden;
background: brown;
color: white;
}
<aside>
sidebar
</aside>
<article>
content
</article>
There are many ways to do this. One simple way is below.
1st way: Simple inline-block
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
display: inline-block;
background-color: green;
}
<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
Fair warning though: In this case the .main-content will only take the space it needs, and will not actually be full width. So If you want to set background to it, you should actually set the backround to .container.
2nd way: Use calc for width
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
position: relative;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
float: left;
}
.main-content {
float: right;
background-color: green;
width: calc(100% - 180px);
height: 600px;
}
<div class="container">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
3rd way: use Flex
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: flex;
}
.sidebar {
background-color: red;
width: 180px;
height: 600px;
}
.main-content {
background-color: green;
flex: auto;
}
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
Flexbox is probably the nicest solution, but saidly old browsers don't support it.
4th way of doing this is the oldfasioned way with faking tables:
.container {
width: 100%;
height: 600px;
background-color: #f2f2f2;
display: table;
}
.sidebar {
background-color: red;
width: 180px;
display: table-cell;
}
.main-content {
display: table-cell;
background-color: green;
}
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
So, I have three divs:
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
I'd like the rightmost div dynamicallyallocated to be dynamically sized based on the content using display: inline-block; and the other div takeremaining to take the remaining space in the parent div. I've tried this with my css:
.takeremaining {
display: inline-block;
width: 100%;
float: left;
background-color: #0000ff;
}
.centeredcontent {
display: table;
margin: 0 auto;
background-color: #00ffff;
}
.dynamicallyallocated {
display: inline-block;
float: right;
background-color: #00ff00
}
but, as you can see by this JSFiddle demo, the div dynamicallyallocated is bumped beneath takeremaining. I believe this is because of width: 100%; in takeremaining, but I'm not sure how to give it a dynamic width based on the conditional width of dynamicallyallocated. What would you suggest?
Here is a solution for you.
.container {
display: table;
width: 100%;
}
.takeremaining {
display: table-cell;
width: 100%;
text-align: center;
background-color: #0000ff;
}
.centeredcontent {
display: inline-block;
background-color: #00ffff;
}
.dynamicallyallocated {
display: table-cell;
width: 0;
background-color: #00ff00;
white-space: nowrap
}
<div class="container">
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
</div>
Have problem. I have this code.
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I need to make two colums.
"Sidebar" must have fixed width 200px;
And "content" all remaining width to fullscreen.
I cant change the structure of html code, just css.
if absolute position is ok, you can use it to say left:200px; right:0 and get all the space you need
fiddle : http://jsfiddle.net/h2udmqhn/
.main {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 200px;
background: blue;
}
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
Use float: left for .sidebar and left margin for .content:
.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}
http://jsfiddle.net/orty5qtj/1/
Another option is to use calc, which is unsupported in IE8. The solution above works fine in all browsers.
Try this :
.sidebar {
float: left;
min-height: 50px;
background: red;
width: 200px;
}
.content {
background : yellow;
margin-left: 200px;
min-height: 50px;
}
https://jsfiddle.net/Saiyam/5krmkkkx/3/
There a couple of simple ways to do this without the need for calc, margins or absolute positioning. Both of the following ways have the added bonus of keeping the columns the same height as each other
Using display table (compatible to back ie8)
.main {
display: table;
width: 100%;
}
.main > div {
display: table-cell;
}
.sidebar {
width: 200px;
background: blue;
}
.content {
background: red;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Using flex (for newer browsers only unless used with the browser prefix):
.main {
display: flex;
width:100%;
max-width:100%;
}
.sidebar {
width: 200px;
flex: 0 0 200px;
background-color:blue;
}
.content {
background-color:red;
flex: 1 0 auto;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
So there are 3 columns all with 100% vertical height.
left column has fixed width of 80px.
middle column and right column fill in the available space by ratio of 80% to 20%. So middle takes up 80% space, and right one takes 20% space.
right column width however if is less than 100px that it becomes fixed to 100px. min-width is 100px and max-width is 20% of available space.
I know right now there is no way to refer available vertical or horizontal space, or choose what percentage refers to...and that's why i am lost.
I can't use flexbox, and don't want to use javascript (but be sure it's not possible with css first).
This can be easily achieved using display: table and display: table-cell.
http://jsfiddle.net/Mgzbq/
HTML
<div class="table main">
<div class="cell left">left</div>
<div class="cell">
<div class="table inner">
<div class="cell center"></div>
<div class="cell right"></div>
</div>
</div>
</div>
CSS
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;/* Keep this as top|middle|bottom, otherwise the container table of center and right div will have "vertical-align: baseline" and doesn't position properly if there is no content in center and right div*/
}
.left {
width: 80px;
background-color: #E07749;
}
.center {
width: 80%;
background-color: #E0DD49;
}
.right {
width: 20%;
min-width: 100px;
background-color: #49E0AE;
}
.main {
width: 100%;
height: 200px;
}
.inner {
width: 100%;
height: 100%;
}
Here is the demo what you want.
CSS
*{
margin: 0
}
body, html, .outer, .leftCol, .rightSec, .innerCnt{
height: 100%;
}
.leftCol {
min-height:100px;
width: 80px;
float: left;
background: red
}
.rightSec {
margin-left:80px
}
.innerCnt {
display: table;
width: 100%;
}
.midCol {
width: 80%;
background: green;
height:100px;
display: table-cell;
}
.rightCol {
min-width: 100px;
display: table-cell;
background: yellow;
height:100px;
}