2 replies [Last post]
fahrvergnuugen
Offline
newbie
galway ny
Last seen: 17 years 33 weeks ago
galway ny
Joined: 2004-03-04
Posts: 2
Points: 0

<div style="width:130px; height:100%; background-color:red; float:left; border: 1px solid black;">a</div>
<div style="height:100%; background-color: lightgreen; border: 1px solid black;">b</div>

in that example, there will be two boxes. the first has a set width and the second appears right next to it and fills up the rest of the page.

I want to do the same thing only on its side, rotated 90 degrees clockwise. see the attachment for an example. I want the red box "A" to be 130px high and 100% wide. I want green box "B" to appear right under it, 100% wide and 100% - 130px tall.

If I use 100% for the height of the green box, I will get a scroll bar because the total betwen the two boxes is 100% + 130px.

I can't figure out how to do this. obviously you can't have an expression like that.

untitled 1.gif is what i am trying to acheive. untitled 3.gif is what the above code will produce.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Need Help with basic box drawing

Hi fahrvergnuugen,
You seem to have the widths and heights mixed up so its a little confusing.
This may be what you want

<div style="width:100%; height:130px; background-color:red; border: 1px solid black;">a</div> 
<div style="width:100%; height:130px; background-color: lightgreen; border: 1px solid black;">b</div>
Notice the widths are set to 100% and nothing is floated.

Hope that helps

fahrvergnuugen
Offline
newbie
galway ny
Last seen: 17 years 33 weeks ago
galway ny
Joined: 2004-03-04
Posts: 2
Points: 0

Need Help with basic box drawing

no, i didnt have them mixed up. i was using at as an example.

i acheived the vertical effect by doing this:

<div style="position: absolute;
    height: 100%;
    width: 100%;
background-color:lightgreen; 
    padding-top: 130px;">b
</div>

<div style="position: absolute;
    height: 130px;
background-color:red; 
    width: 100%;">a<div>

its confusing unless you copy and paste the two different examples and compare.