Forum Moderators: not2easy

Message Too Old, No Replies

div under div with float left

         

Kysmiley

2:27 am on Feb 13, 2005 (gmt 0)

10+ Year Member



I have a two clolum with a header and footer. I have a background image that goes across the top and down the left nav side. The top looks great but if I have too much content in the right content div the background down the left does not extend far enough. Is there anyway to add a container under the left navigation container that would expand to when the right container expanded past the nav container.. Not sure if i make sence here is the main part of the css code.
#####################
#content {
position:relative;
height:100%;
min-height:100%;
border-right:none;
margin-bottom:-80px;
}
* html #content {height:100%}
body>#content {height:auto}
#contentinner {margin-left:190px}
* html #contentinner {height:1%}/* combat ie 3 pixel jog */
html>body #content{height:auto}

#nav {
float:left;
width: 148px;
text-align:center;
background: transparent;
padding: 0;

}
/* this is the one im attempting to put direcvtly under the nav container so i can add a filler background into it so the background bar on the left extends to the bottom of the page*/
#undernav {
position: absolute;
left: -12px;
top: 550px;
float:left;
width: 148px;
text-align:center;
background: white;
border: solid 1px red;

}
########################
Pat

SuzyUK

2:30 pm on Feb 13, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Pat..

I'm not sure that absolutely positoning a div under the nav will work

what about a background image on the content div itself repeating all the way down the page then just cover it up with header or footer background image/colors as required.

that way the image should repeat as far as the longest column requires?

Suzy

Kysmiley

3:09 pm on Feb 13, 2005 (gmt 0)

10+ Year Member



Thanks suzy never thought of that it would just be like a layer the filler would continue past the main background though because its repeating itself.
Great idea.
Pat

Kysmiley

4:07 pm on Feb 13, 2005 (gmt 0)

10+ Year Member



SuzyUK I did it but had to set the filler peace to the body background and the main background to the content background. I however had to set the top margin in the content to -20 to have it sitting right at the top of the screen. Is there any other way to do this or will it look ok in all browsers doing this.
Here is the code again.
####################
html, body {margin:0; padding:0%; height:98%;}
body {
font-family: verdana, sans-serif Arial; font-size: 16px;
background-image: url(left.jpg); background-repeat: repeat-y; #FFFFFF;
}
#content {
position:relative;
height:100%;
min-height:100%;
background-image: url(pagebkg.jpg); background-repeat: no-repeat; #FFFFFF;
border-right:none;
margin-top: -20px;
margin-bottom:-80px;
}
* html #content {height:100%}
body>#content {height:auto}
#nav {
float:left;
width: 148px;
text-align:center;
background: transparent;
padding: 0;

}
##############################
If i set it to content it would overlay the body and with the style of the background i needed it under it.
Should i also set the *html #content to show a negative top margin?
Pat