Want nav div to run as long as content div [Archive]

View Full Version : Want nav div to run as long as content div

sivlock

03-15-2009, 03:37 PM

I have set up a left hand side div column and a right one for main content etc but I want the left hand div to run as long with the main content with a filled colour, any help code below:

<body>
<div id="main_container_index">

<div id="left_col_index"><img /><div style="padding:0px"><a href="index.html"><img /></a></div>
<div><img /></div>
<div id="left_col_nav_background">

<div id="nav">
<div><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button1','','images/home_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="about_main.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button2','','images/about__ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="the_games.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button9','','images/games_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button3','','images/news_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="fans.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button4','','images/fans_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button5','','images/links_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button7','','images/contact_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="site_map.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button8','','images/site_map_ov.jpg',0)"><img /></a></div>
</div>

</div>
</div>

<div id="right_col_top_index"><img />
<div id="main_content"><h2>Header here</h2>
<p>paragaph goes here</p>
<div class="badge_left"><a href="something.html"><img /></a>
<div align="center" style="padding-top:5px"><h2><a href="something.html">Something</a></h2>
</div></div>
<div class="badge_right"><img />
<div align="center" style="padding-top:5px"><h2>Header goes here</h2></div></div>
<div class="badge_left" style="clear:both;padding-top:5px"><img /></div>
</div>
</div>

<div id="footer">
<div id="footer_left">copyright</div>
<div id="footer_right">something</div>
</div>
</div>
</body>

CSS

body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(../images/background.jpg);
color: #FFFFFF;
}

p {
line-height: normal;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

h1 {
margin: 0px;
padding: 0px;
font-size: 18px;
color: #092417;
}

h2 {
color: #FFFFFF;
padding: 0px;
margin: 0px;
font-size: 18px;
}
h2 a {
color: #FFFFFF;
text-decoration: none;
}
h2 a:hover {
color: #35A170;
}

#main_container_index {
width: 875px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
overflow: hidden;
background-color: #000000;
}

#main_content {
background-color: #000000;
height: 100%;
padding: 10px;
}

#left_col_index {
float: left;
width: 174px;
background-color: #278F5E;
visibility: visible;
height: 100%;
overflow: visible;
}

#left_col_nav_background {
background-image: url(../images/left_nav_background.jpg);
background-repeat: no-repeat;
height: 449px;
}

#nav {
text-align: center;
padding-top: 10px;
}

.nav_pad_top {
margin-top: 5px;
}

#right_col_top_index {
float: right;
width: 701px;
overflow: hidden;
color: #FFFFFF;
}

#right_col_index {
width: 701px;
float: right;
background-image: url(../images/main_background_index.jpg);
height: 704px;
visibility: inherit;
}

#right_col_index a {
color: #0C3420;
}

#right_col_index a:hover {
text-decoration: none;
}

#right_col_main_index {
margin-top: 125px;
margin-right: 50px;
margin-left: 55px;
float: left;
color: #000000;
}

#footer {
clear: both;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
height: 52px;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
}

#footer_left {
float: left;
margin-top: 15px;
margin-left: 55px;
}

#footer_right {
float: right;
margin-top: 15px;
margin-right: 10px;
}
#header_main {
background-image: url(../images/header_about.jpg);
background-repeat: no-repeat;
border: 1px solid #33669F;
height: 42px;
}
#header_main_inside {
#margin-top: 7px;
margin-left: 5px;
margin-top: 7px;
}
.badge_left {
float: left;
margin-left: 20px;
}
.badge_right {
float: right;
margin-right: 20px;
}

sivlock

03-15-2009, 03:53 PM

and how do i get all the floating divs and whatever in the right main div to be all contained within that div?

bluewalrus

03-15-2009, 04:18 PM

Why are there blank image tags everywhere?

sivlock

03-15-2009, 04:20 PM

Just an indication to where the images would go I can't put everything in.

bluewalrus

03-15-2009, 04:24 PM

Okay, What does
and how do i get all the floating divs and whatever in the right main div to be all contained within that div? mean? Can you use the actual div names? Same for
left hand div to run as long with the main content with a filled colour Do you want the green to go to the bottom where copyright is?

sivlock

03-15-2009, 04:32 PM

I want the green background to run down to the footer so
<div id="left_col_index"> to run down to <div id="footer">

and also everything to be contained in the main div like so:

<div id="right_col_top_index"> = main container div for content

<div class="badge_left"><div class="badge_right"> = content at the moment just runs below because it is floating.

bluewalrus

03-15-2009, 04:40 PM

umm maybe this I'm not really sure what you want maybe make an image of how page looks and what you want. I added background colors to the divs you said to show what is in which.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(../images/background.jpg);
color: #FFFFFF;
}

p {
line-height: normal;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

h1 {
margin: 0px;
padding: 0px;
font-size: 18px;
color: #092417;
}

h2 {
color: #FFFFFF;
padding: 0px;
margin: 0px;
font-size: 18px;
}
h2 a {
color: #FFFFFF;
text-decoration: none;
}
h2 a:hover {
color: #35A170;
}

#main_container_index {
width: 875px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
overflow: hidden;
background-color: #000000;
}

#main_content {
background-color: #000000;
height: 100%;
padding: 10px;
}

#left_col_index {
float: left;
width: 174px;
background-color: #278F5E;
visibility: visible;
height: 100%;
overflow: visible;
}

#left_col_nav_background {
background-image: url(../images/left_nav_background.jpg);
background-repeat: no-repeat;
height: 449px;
}

#nav {
text-align: center;
padding-top: 10px;
}

.nav_pad_top {
margin-top: 5px;
}

#right_col_top_index {
float: right;
width: 701px;
overflow: hidden;
color: #FFFFFF;
}

#right_col_index {
width: 701px;
float: right;
background-image: url(../images/main_background_index.jpg);
height: 704px;
visibility: inherit;
}

#right_col_index a {
color: #0C3420;
}

#right_col_index a:hover {
text-decoration: none;
}

#right_col_main_index {
margin-top: 125px;
margin-right: 50px;
margin-left: 55px;
float: left;
color: #000000;
}

#footer {
clear: both;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
height: 52px;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
}

#footer_left {
float: left;
margin-top: 15px;
margin-left: 55px;
}

#footer_right {
float: right;
margin-top: 15px;
margin-right: 10px;
}
#header_main {
background-image: url(../images/header_about.jpg);
background-repeat: no-repeat;
border: 1px solid #33669F;
height: 42px;
}
#header_main_inside {
#margin-top: 7px;
margin-left: 5px;
margin-top: 7px;
}
.badge_left {
float: left;
margin-left: 20px;
}
.badge_right {
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="main_container_index">

<div id="left_col_index"><img /><div style="padding:0px"><a href="index.html"><img /></a></div>
<div><img /></div>
<div id="left_col_nav_background">

<div id="nav">
<div><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button1','','images/home_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="about_main.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button2','','images/about__ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="the_games.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button9','','images/games_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button3','','images/news_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="fans.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button4','','images/fans_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button5','','images/links_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button7','','images/contact_ov.jpg',0)"><img /></a></div>
<div class="nav_pad_top"><a href="site_map.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('button8','','images/site_map_ov.jpg',0)"><img /></a></div>
</div>

</div>
</div>

<div id="right_col_top_index"><img />
<div id="main_content"><h2>Header here</h2>
<p>paragaph goes here</p>
<div class="badge_left"><a href="something.html"><img /></a>
<div align="center" style="padding-top:5px"><h2><a href="something.html">Something</a></h2>
</div></div>
<div class="badge_right"><img />
<div align="center" style="padding-top:5px"><h2>Header goes here</h2></div></div>
<div class="badge_left" style="clear:both;padding-top:5px"><img /></div>
</div>
</div>

<div id="footer">
<div id="footer_left">copyright</div>
<div id="footer_right">something</div>
</div>
</div>
</body>
</html>

sivlock

03-15-2009, 05:53 PM

Thats what I want for the green bar going all the way down to the footer how did you do that its a bit difficult to see going through the code could you tell me or highlight it? Cheers

bluewalrus

03-15-2009, 09:19 PM

I changed some of your styles i'm not sure which one did it i changed it before i looked at it. All styles should end with a ";" like "height:20px;". I also changed div align center to text-align:center; I think those are all the changes...

sivlock

03-15-2009, 10:14 PM

Really can't find which style i need to be changing or doing to make the left hand div with background stretch right down to the footer to be filled with green. All my css tags are closed properly and i couldn't see about the div align center but i wouldn't imagine that would have been it.

bluewalrus

03-15-2009, 10:20 PM

The left side is the green side isn't it? Name the div you want to extend to the footer.

sivlock

03-15-2009, 10:27 PM

its this one : <div id="left_col_index">

bluewalrus

03-15-2009, 10:44 PM

can you do a screenshot and mark it up of what you want i have no idea what you mean the green is meeting up with the footer div on my screen

sivlock

03-15-2009, 10:57 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(../images/background.jpg);
color: #FFFFFF;
}

p {
line-height: normal;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

h1 {
margin: 0px;
padding: 0px;
font-size: 18px;
color: #092417;
}

h2 {
color: #FFFFFF;
padding: 0px;
margin: 0px;
font-size: 18px;
}
h2 a {
color: #FFFFFF;
text-decoration: none;
}
h2 a:hover {
color: #35A170;
}

#main_container_index {
width: 875px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
overflow: hidden;
background-color: #000000;
}

#main_content {
background-color: #000000;
height: 100%;
padding: 10px;
}

#left_col_index {
float: left;
width: 174px;
background-color: #278F5E;
visibility: visible;
height: 100%;
overflow: visible;
}

#left_col_nav_background {
background-image: url(../images/left_nav_background.jpg);
background-repeat: no-repeat;
height: 449px;
}

#nav {
text-align: center;
padding-top: 10px;
}

.nav_pad_top {
margin-top: 5px;
}

#right_col_top_index {
float: right;
width: 701px;
overflow: hidden;
color: #FFFFFF;
}

#right_col_index {
width: 701px;
float: right;
background-image: url(../images/main_background_index.jpg);
height: 704px;
visibility: inherit;
}

#right_col_index a {
color: #0C3420;
}

#right_col_index a:hover {
text-decoration: none;
}

#right_col_main_index {
margin-top: 125px;
margin-right: 50px;
margin-left: 55px;
float: left;
color: #000000;
}

#footer {
clear: both;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
height: 52px;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
}

#footer_left {
float: left;
margin-top: 15px;
margin-left: 55px;
}

#footer_right {
float: right;
margin-top: 15px;
margin-right: 10px;
}
#header_main {
background-image: url(../images/header_about.jpg);
background-repeat: no-repeat;
border: 1px solid #33669F;
height: 42px;
}
#header_main_inside {
#margin-top: 7px;
margin-left: 5px;
margin-top: 7px;
}
.badge_left {
float: left;
margin-left: 20px;
}
.badge_right {
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="main_container_index">

<div id="left_col_index"><img />
<div id="left_col_nav_background"></div>
</div>

<div id="right_col_top_index">
<div id="main_content"><h2>Header here</h2>
<p>paragaph goes here</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>

<div id="footer">
<div id="footer_left">copyright</div>
<div id="footer_right">something</div>
</div>
</div>
</body>
</html>

Basically I need the left hand nav side to stretch down as long as the right hand main content div column when more content is added so they are equal in length. Code above is just a shortened version of it to try to simplify matters.

sivlock

03-15-2009, 10:59 PM

<div id="left_col_index"> i want stretching down to the footer when more text is added to <div id="main_content">

bluewalrus

03-16-2009, 01:48 AM

oo height:100% in that case. That needs an initial value though to function which is what the html,body gives it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-image: url(../images/background.jpg);
color: #FFFFFF;
}
html,body {
height: 100%;
}

#main_container_index {
width: 875px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
overflow: hidden;
background-color: #000000;
height:100%;
}

#left_col_index {
float:left;
width: 174px;
background-color: #278F5E;
visibility: visible;
height: 90%;
overflow: visible;
}
p {
line-height: normal;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

h1 {
margin: 0px;
padding: 0px;
font-size: 18px;
color: #092417;
}

h2 {
color: #FFFFFF;
padding: 0px;
margin: 0px;
font-size: 18px;
}
h2 a {
color: #FFFFFF;
text-decoration: none;
}
h2 a:hover {
color: #35A170;
}

#main_content {
background-color: #000000;
height: 100%;
padding: 10px;
}

#left_col_nav_background {
background-image: url(../images/left_nav_background.jpg);
background-repeat: no-repeat;
height: 449px;
}

#nav {
text-align: center;
padding-top: 10px;
}

.nav_pad_top {
margin-top: 5px;
}

#right_col_top_index {
float: right;
width: 701px;
overflow: hidden;
color: #FFFFFF;
}

#right_col_index {
width: 701px;
float: right;
background-image: url(../images/main_background_index.jpg);
height: 704px;
visibility: inherit;
}

#right_col_index a {
color: #0C3420;
}

#right_col_index a:hover {
text-decoration: none;
}

#right_col_main_index {
margin-top: 125px;
margin-right: 50px;
margin-left: 55px;
float: left;
color: #000000;
}

#footer {
clear: both;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
height: 52px;
color: #FFFFFF;
font-weight: bold;
font-size: 14px;
}

#footer_left {
float: left;
margin-top: 15px;
margin-left: 55px;
}

#footer_right {
float: right;
margin-top: 15px;
margin-right: 10px;
}
#header_main {
background-image: url(../images/header_about.jpg);
background-repeat: no-repeat;
border: 1px solid #33669F;
height: 42px;
}
#header_main_inside {
#margin-top: 7px;
margin-left: 5px;
margin-top: 7px;
}
.badge_left {
float: left;
margin-left: 20px;
}
.badge_right {
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="main_container_index">

<div id="left_col_index"><img />
<div id="left_col_nav_background"></div>
</div>

<div id="right_col_top_index">
<div id="main_content"><h2>Header here</h2>
<p>paragaph goes here</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>

<div id="footer">
<div id="footer_left">copyright</div>
<div id="footer_right">something</div>
</div>
</div>
</body>
</html>

sivlock

03-16-2009, 10:42 AM

Thanks for your time I wont get to try this out til later on tonight as im at work right now and going out this evening but I shall let you know once I have tried it.