CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

Fluid and fixed column

I have this code: http://jsfiddle.net/spadez/TPKLv/

<div style="background-color:white; width: 400px;">
<span class="status" id="active"></span><a href="detail.html" class="title">Title</a>
<a href="#" class="number">6</a>
</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?

Upvotes: 0

Views: 78

Answers (4)

G.L.P
G.L.P

Reputation: 7207

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>
        <a href="detail.html" class="title">Title</a>    
         <a href="#" class="number">6</a>    
    </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.

Upvotes: 1

NoobEditor
NoobEditor

Reputation: 15871

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

Upvotes: 1

Rodik
Rodik

Reputation: 4092

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><a href="detail.html" class="title">Title</a>
    <a href="#" class="number">6</a>
</div>
<div style="width: 100%; background-color: white;">
   Test test
</div>

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

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><a href="detail.html" class="title">Title</a>
<a href="#" class="number">6</a>
</div>
<div id="rightCol" style="background-color: white; float:right;">
Test test
</div>

css

body {background-color: gray;}

#rightCol{
    width: calc(100% - 400px);
}

fiddle

Upvotes: 1

Related Questions