Dynamic width to float left div

Question

I have two divs in my application. How can I make my left div to fit all space till right div. Right one can be text or image with any width.

<div id="header" class="header">
    <div class="logo">
        <img src="/Content/images/my_logo.png" alt="" />
    </div>
    <div class="logoClient">
        Test Client /*here can be text or image with ANY SIZE */
    </div>
    <div class="clear"></div>
</div>

In this example I've done with fixed widths(700px and 200px), but this is wrong, because right one's text is dynamic and I want to left green bar be dynamic too.

http://jsfiddle.net/C5GL6/1/

Another approach with table, table-cell css options... but again... can't make left green bar fit all space.

http://jsfiddle.net/sjfQj/

How can I achieve this?

Are you looking for [this](http://stackoverflow.com/questions/16529291/div-to-take-up-entire-remaining-width/16529353#16529353)? someone recently downvoted that answer of mine for no good reason — Mr. Alien, Jan 16 '14 at 11:23
@Mr.Alien, no, in your example left div has fixed width... I don't want both left and right divs to have fixed width... :) — Gab, Jan 16 '14 at 11:39

score 0 · Answer 1 · edited Sep 14 '15 at 12:44

0

Remove the width size in div

Edited fiddle http://jsfiddle.net/C5GL6/2/

 .logo {
float: left;
height: 55px;
padding: 10px 20px;
background: #004B35;

}

edited Sep 14 '15 at 12:44

BNL

7,085
4
27
32

answered Jan 16 '14 at 11:30

neel

5,123
12
47
67

Sowmya · Answer 2 · 2014-01-16T11:53:27.463

0

Remove width and add float:left to both the divs

    .header 
{
    width: 950px;
    font-family:Helvetica, Arial, sans-serif;
    display:table
}

.logo {
    height: 55px;
    padding: 10px 20px;
    background: #004B35;
    display:table-cell;
}

 .logoClient 
 {
   display:table-cell;
    height: 55px;
    line-height: 55px;
    padding: 10px 0px;
    margin:0px -10px 0px 0px;
    font-size: 30px;
    color: #004B35;
    overflow:hidden;
    font-weight: bold;
    text-align: right;
    background: red;
}

DEMO Updated

edited Jan 16 '14 at 11:53

answered Jan 16 '14 at 11:41

Sowmya

26,684
21
96
136

http://jsbin.com/ORetUbu/4 Small text is not apperaing in the right part and left part is not fitting all remaining space. – Gab Jan 16 '14 at 11:49
1

Use `display:table` and `table-cell`. here is the demo http://jsbin.com/ORetUbu/6/ – Sowmya Jan 16 '14 at 11:52
This is going to be good way... But anyway I need just opposite(the red part must be with the size of text(size of "Test Client" or whatever text they will be) and black part must fit remaining space)... – Gab Jan 16 '14 at 11:59

Dynamic width to float left div

2 Answers2