Two divs: one fixed, other stretched

Question

I am trying to accomplish this: divs-fixed-and-stretched

But I am having trouble getting the two middle divs to play nice. If I set them both to a relative number (30% and 70%) it "works" but the left div changes size as the user changes the browser-windows width.

 #floatitleft{width:30%; float:left;}
 #floatitright{width:70%; float:left;}

What I want is, as the picture illustrates

 #floatitleft{width:300px; float:left;}
 #floatitright{width:100%; float:left;}

But this causes "floatitright" to end up beneath floatitleft. And if I set it to 70% it does end up to the right of "floatitleft" but as I change the browser size a little it ends up underneath yet again. What to do?

UPDATE: Eventually I ended up with:

#topper{
    height:100px;
    width:100%;
    background-color:blue;
}
#wrapperz{
    height:inherit;
    width:100%;
}
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
#wrapperz #floatitleft{
    width:300px;
    float:left;
}
#wrapperz #floatitright{
    margin-left: 300px;
    min-width:300px;
}
#bottommer{
    height:100px;
    width:100%;
    background-color:red;
}

Which would be used as:

<div id="topper">
test
</div>

<div id="wrapperz">

<div id="floatitleft">
<p> Stuff </p>
</div>

<div id="floatitright">
<p> Stuff </p>
</div>

<div style="clear: both;"/>

</div> <!-- Close Wrapper -->

<div id="bottommer">
test
</div>

Note that this isn't proper HTML but it just serves as the solution to my example. Also, the "div style="clear: both" is escpecially important if you try this because not using that cuases the footer to mess up as the wrapper doesn't properly stretch vertically. But Mark has provided a what I believe to be better/cleaner alternative below.

score 14 · Accepted Answer · answered Sep 29 '11 at 15:46

14

Wouldn't this work as intended?

#floatitleft{
    width:300px;
    float:left;
}
#floatitright{
    margin-left: 300px;
}

answered Sep 29 '11 at 15:46

ANeves

6,219
3
39
63

Hah, that actually did it! Thanks. – natli Sep 29 '11 at 15:51
For some reason I've noticed if you do both elements as floated, it doesn't seem to work, but if you only float one, the other element automatically wraps around it. (that's what he did there) – Mark Kramer Sep 29 '11 at 16:13
@mimic I can't guess why. If you couldn't fix it yourself, maybe you can open your own question, with more details on your particular problem. – ANeves Jan 30 '18 at 16:26

Mark Kramer · Answer 2 · 2011-09-30T14:32:43.470

3

Here, I made a duplicate of your picture: jsbin.com/ipexep/3 (click "edit in jsbin" at the top-right to view and edit the source)

I for the height of the top and bottom sections, I took the height for them that you put in the picture.

Note: I did it by making every section absolutely positioned and setting their top, bottom, left, or right attributes accordingly.

Also, notice that my method will match every screen size. I have streched it in every area you didn't specify a dimension. (except the header and footer needed a height dimension so I guessed since you didn't specify)

edited Sep 30 '11 at 14:32

answered Sep 29 '11 at 16:09

Mark Kramer

3,134
7
34
52

Whoa awesome, that's better than what I ended up with. Now all I have to do is try and implement a min-width that's also IE compliant. Thanks alot! – natli Sep 29 '11 at 16:28
What do you mean? Min-width isn't IE compliant? – Mark Kramer Sep 29 '11 at 16:52
I want the right div to stop shrinking after a certain point so the text inside of it doesn't get too weird. According to [this](http://www.webreference.com/programming/min-width/) IE doesn't support the min-width CSS property. – natli Sep 29 '11 at 18:34
Yeah it does seem to work in IE8. Probably older versions of IE that have trouble with it but oh well.. compatibility has to stop at one point, it's not like they lose functionality. – natli Sep 30 '11 at 06:31
+1. Maybe you could update your answer with the new version you put at http://jsbin.com/ipexep/3 ? – ANeves Sep 30 '11 at 08:21

score 1 · Answer 3 · answered Sep 29 '11 at 15:42

1

You can accomplish that very easy using grid system.

http://960.gs/

Take a look, you can choose a 12 or 16 , 24 or even more columns. You just use classes like "grid_4", "grid_8" depending on the width you need.

answered Sep 29 '11 at 15:42

sticksu

3,660
3
23
41

Thanks for the link, it looks interesting! Aneves answer already did it though :D – natli Sep 29 '11 at 15:51
One doesn't really need a grid system to just make one column fixed and another fluid. Just float the first div and give it fixed width and give the fluid one left margin same as the width of the first div. It's three lines of code, not 6kB of minified 960.gs. – Spadar Shut Sep 29 '11 at 15:57
2

I tried to help thinking that he's working on a real site, not just 4 colored divs. If you have a lot of divs to position grid system is really useful. – sticksu Sep 29 '11 at 16:13

Two divs: one fixed, other stretched

3 Answers3

Linked