ASAAKI
04-01-2003, 01:39 AM
silly subject, cudn't think of a better one.
this (http://www10.brinkster.com/asaakitesting/auk/index.html) is the home page.the page is divided into two halves (well, not exactly halves...) 'left' and 'right'. i want to get the 'left' div to be as long as the 'content' div within it. but it's always shorter.
within the 'left' div are two other divs: 'leftbar' and 'content'. the 'left' div can only get as long as the 'leftbar'.
'left' and 'content' are both position:absolute.
at first my 'leftbar' div, which is inside 'left', also had an absolute position, so then i just got rid of any position for it, and added <br>s to add to its height. that worked of course, because as it didn't have an absolute position, then its parent div had to contain all of it. but it's a super lame way of doing it. :rolleyes: and if you take the css link away, older browsers are gonna get a tiring long gap in the middle of the page for nothing. is it that it can't be done?
btw plz don't view the page in mozilla, view it in IE or opera to see 'content' hanging out.
this is the relevant bit of style:
#left{
position:absolute;
display:block;
top:0;
left:0;
width:55%;
margin:0;
border-right:2px solid #9BBD34;
border-bottom:2px solid #9BBD34;
background-color:#E0E88F;
color:#9BBD34;
padding:1px;
z-index:1;
}
#leftbar{
font-family:verdana, sans-serif;
width:31%;
margin-top:2%;
margin-left:3%;
color:black;
}
#content{
position:absolute;
top:2%;
width:60%;
left:36%;
background-color:#FFFFFF;
border:1px solid #9BBD34;
color:black;
padding:5px;
padding-top:5px;
}
#right{
position:absolute;
left:56%;
width:44%;
height:100%;
top:0px;
margin:0px;
background-color:#FFFFFF;
color:black;
}
the left div is arranged like this:
______________________________
| left _________      __________  |
|      |leftbar    |    | content    | |
|      |            |     |               | |
|      |            |     |               | |
|      |            |     |               | |
|      |            |     |               | |
|      |________|    |               | |
|________________|               |_|
                          |                |
                          |__________|
as you can see, 'content' is just dropping out. i need 'left' to catch up with it.
i know it must be because content has position:absolute... so is there no way to fix it? messing around with other position styles for different divisions does just that - mess it all up.
this (http://www10.brinkster.com/asaakitesting/auk/index.html) is the home page.the page is divided into two halves (well, not exactly halves...) 'left' and 'right'. i want to get the 'left' div to be as long as the 'content' div within it. but it's always shorter.
within the 'left' div are two other divs: 'leftbar' and 'content'. the 'left' div can only get as long as the 'leftbar'.
'left' and 'content' are both position:absolute.
at first my 'leftbar' div, which is inside 'left', also had an absolute position, so then i just got rid of any position for it, and added <br>s to add to its height. that worked of course, because as it didn't have an absolute position, then its parent div had to contain all of it. but it's a super lame way of doing it. :rolleyes: and if you take the css link away, older browsers are gonna get a tiring long gap in the middle of the page for nothing. is it that it can't be done?
btw plz don't view the page in mozilla, view it in IE or opera to see 'content' hanging out.
this is the relevant bit of style:
#left{
position:absolute;
display:block;
top:0;
left:0;
width:55%;
margin:0;
border-right:2px solid #9BBD34;
border-bottom:2px solid #9BBD34;
background-color:#E0E88F;
color:#9BBD34;
padding:1px;
z-index:1;
}
#leftbar{
font-family:verdana, sans-serif;
width:31%;
margin-top:2%;
margin-left:3%;
color:black;
}
#content{
position:absolute;
top:2%;
width:60%;
left:36%;
background-color:#FFFFFF;
border:1px solid #9BBD34;
color:black;
padding:5px;
padding-top:5px;
}
#right{
position:absolute;
left:56%;
width:44%;
height:100%;
top:0px;
margin:0px;
background-color:#FFFFFF;
color:black;
}
the left div is arranged like this:
______________________________
| left _________      __________  |
|      |leftbar    |    | content    | |
|      |            |     |               | |
|      |            |     |               | |
|      |            |     |               | |
|      |            |     |               | |
|      |________|    |               | |
|________________|               |_|
                          |                |
                          |__________|
as you can see, 'content' is just dropping out. i need 'left' to catch up with it.
i know it must be because content has position:absolute... so is there no way to fix it? messing around with other position styles for different divisions does just that - mess it all up.