Fluid and fixed column - html

Question

I have this code: http://jsfiddle.net/spadez/TPKLv/
<div style="background-color:white; width: 400px;">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white; float:right;">
Test test
</div>
I'm trying to make the right column fluid, taking up the remaining space, and the left column fixed width. Can anyone tell me what I am doing wrong with my code, and if this is the best way of doing it?

Answer 1

Simplest is to use display:table-cell; (IE8 and above supported )
this way, you can fix the width of one div and next div will take up the remaining space
Once added, you can even use inline native methods like vertical-align, and since its not floating, adjusting the position of divs is easy through margin and padding depending on you layout! :)
check this demo
It is most compatible and cleanest you can get for fixed width and dynamic width in a page
for calc, it is incompatible with IE9 still
if you have to use it on regular basis, create a span as below :
span.fake_width{
display:block;
width:20px;
}
then just add it to the existing layout Demo

Answer 2

I suggest this, with the condition always left div width is 400px. And i assume is cause you use inline-style
html
<div style="background-color:white; width: 400px;float:left;">
<span class="status" id="active"></span>Title
6
</div>
<div id="rightCol" style="background-color: white; float:right;">
Test test
</div>
css
body {background-color: gray;}
#rightCol{
width: calc(100% - 400px);
}
fiddle

Answer 3

The most native way of doing this is to manipulate the box model:
I've added a float to the first div, and removed it from the second one.
this way the first div is treated as an inline-block and the second one is a block, which tries hard to ignore other inline blocks.
i've updated your fiddle: http://jsfiddle.net/TPKLv/3/
<div style="background-color:white; width: 400px; float:left">
<span class="status" id="active"></span>Title
6
</div>
<div style="width: 100%; background-color: white;">
Test test
</div>

Answer 4

Try like this: Demo
CSS:
.container {
background-color:blue;
height: auto;
overflow: hidden;
}
.sidebar {
float:left;
background-color:grey;
width: 100px;
}
.content {
background-color:green;
float: none;
width: auto;
overflow: hidden;
}
HTML:
<div class="container">
<div class="sidebar">
<span class="status " id="active"></span>
Title
6
</div>
<div class="content">Test test</div>
</div>
UPDATED FIDDLE LINK.
As you need, I added padding and margin for the div's and its working fine.