CODEWITHSUNDEEP
htmlcss
natli
natli

Reputation: 3822

Two divs: one fixed, other stretched

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.

Upvotes: 13

Views: 7857

Answers (3)

Mark Kramer
Mark Kramer

Reputation: 3214

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)

Upvotes: 3

ANeves
ANeves

Reputation: 6365

Wouldn't this work as intended?

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

Upvotes: 14

sticksu
sticksu

Reputation: 3738

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.

Upvotes: 1

Related Questions