I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left.
It's quite easy, if you use tables:
<table width="100%">
<tr>
<td>Column 1</td>
<td width="200">Column 2 (always 200px)</td>
</tr>
</table>
But how about DIVs? Is it possible to accomplish this? If yes, then how?
This question is related to
html
css
fluid-layout
Here's a solution (and it has some quirks, but let me know if you notice them and that they're a concern):
<div>
<div style="width:200px;float:left;display:inline-block;">
Hello world
</div>
<div style="margin-left:200px;">
Hello world
</div>
</div>
#wrapper {_x000D_
margin-right: 50%;_x000D_
}_x000D_
#content {_x000D_
float: left;_x000D_
width: 50%;_x000D_
background-color: #CCF;_x000D_
}_x000D_
#sidebar {_x000D_
float: right;_x000D_
width: 200px;_x000D_
margin-right: -200px;_x000D_
background-color: #FFA;_x000D_
}_x000D_
#cleared {_x000D_
clear: both;_x000D_
}
_x000D_
<div id="wrapper">_x000D_
<div id="content">Column 1 (fluid)</div>_x000D_
<div id="sidebar">Column 2 (fixed)</div>_x000D_
<div id="cleared"></div>_x000D_
</div>
_x000D_
CSS:
#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}
HTML:
<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>
The above should work, you can put that code in wrapper if you want the give it width and center it too, overflow:hidden
on the column without a width is the key to getting it to contain, vertically, as in not wrap around the side columns (can be left or right)
IE6 might need zoom:1
set on the #content div too if you need it's support
CSS Solutuion
#left{
float:right;
width:200px;
height:500px;
background:red;
}
#right{
margin-right: 200px;
height:500px;
background:blue;
}
Check working example at http://jsfiddle.net/NP4vb/3/
jQuery Solution
var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);
Check working example http://jsfiddle.net/NP4vb/
I think this is a simple answer , this will split child devs 50% each based on the parent width.
<div style="width: 100%">
<div style="width: 50%; float: left; display: inline-block;">
Hello world
</div>
<div style="width: 50%; display: inline-block;">
Hello world
</div>
</div>
I was recently shown this website for liquid layouts using CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Take a look at the demo pages in the links below).
The author now provides an example for fixed width layouts. Check out; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width.
This provides the following example(s), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (for two column layout like you are after I think)
http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (for three column layout).
Sorry for so many links to this guys site, but I think it is an AWESOME resource.
Source: Stackoverflow.com