CSS one div with liquid width next to a floating div that may or may not exist

Question

I have already read this question but I can't get my head to work a solution that fits my needs, because my situation is a bit different and because I am not very good at CSS.

What I have is a div containing three other divs:

div1 on the left
div2 centered
div3 on the right

The problem is that div2 may or may not exist.

This is what I currently have:

enter image description here

But this is what I want:

enter image description here

Here is my Fiddle

Any ideas? Thanks!

score 1 · Accepted Answer · answered Jun 01 '12 at 10:33

1

#div3{
display:block;
background: #CCC;
overflow: hidden;
}

http://jsfiddle.net/5xgwz/17/

answered Jun 01 '12 at 10:33

monokh

1,970
3
22
31

Thanks a lot, this has really saved me a big headache. I would have never imagined it would be such a simple solution! – John Shepard Jun 01 '12 at 10:45

score 1 · Answer 2 · answered Jun 01 '12 at 10:39

1

check this http://jsfiddle.net/geQqG/16/ and then just copy this code and paste in your dreamweaver and run with firefox browser......

answered Jun 01 '12 at 10:39

Karthi Shan

71
9

score 1 · Answer 3 · answered Jun 01 '12 at 10:41

1

just add overflow:auto; in your div3's css that will work

answered Jun 01 '12 at 10:41

Neji

6,591
5
43
66

score 0 · Answer 4 · answered Jun 01 '12 at 10:41

Hi i think you want this

Please remove to width of #container

as like this

#container {

    padding: 5px;
}

and over-right properties to this #div3 as like this

#div3{
    display:block;
    background: #CCC;
    overflow: hidden;
}

Now Live demo is http://jsfiddle.net/5xgwz/20/

CSS one div with liquid width next to a floating div that may or may not exist

4 Answers4