PDA

View Full Version : help with css height stuff



aebstract
Jan 7th, 2007, 10:22 PM
Hello,
I am working on a website project that I need to get done quickly, today actually. I have a container, which holds two divs. It holds a left and a right div, each side has various things. The left has a top flash section and then a navigation under that, the right side has two divs of different colors, (a logo bar and a red bar) and then the content section under that. I am trying to get the content and nav to line up, but they won't even out. I would like it so that when the content section is longer than the navigation section then the remaining area is filled the same color as the content section. Which I would assume means, fill your base left div or even your containing div with the color of your content... though I have tryed lots and lots of solutions, nothing has worked. Please help!


index file

<?php
$menu = $_GET['menu'];

if (isset($menu)) {
include ("$menu.php");
} else {
include ("home.php");
}

?>
<html>
<head>
<title>Mark's coins & jewlery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="misc/stylesheet.css" rel="stylesheet" type=text/css title=default />
</head>
<body>
<div id="container">

<div id="left">
<div id="flashbg">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="206" height="171">
<param name="movie" value="misc/movie.swf">
<param name="quality" value="high">
<embed src="misc/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="206" height="171"></embed>
</object>
</div>
</div>
<div id="nav"><br />
<img src="misc/ladiesjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lrings">Ladies Rings</a> </li>
<li><a href="index.php?menu=lnecks">Ladies Necklaces</a> </li>
<li><a href="index.php?menu=lwatches">Ladies Watches</a> </li>
<li><a href="index.php?menu=lbpp">Ladies Brooches, Pins & Pendents</a>
</li>
<li><a href="index.php?menu=lbracelets">Ladies Bracelets</a> </li>
<li><a href="index.php?menu=purses">Purses</a> </li>
</ul>
</div>
<img src="misc/mensjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=mrings">Mens Rings</a> </li>
<li><a href="index.php?menu=mchains">Mens Chains</a> </li>
<li><a href="index.php?menu=mbracelets">Mens Bracelets</a> </li>
<li><a href="index.php?menu=mwatches">Mens Watches</a> </li>
<li><a href="index.php?menu=mpendents">Mens Pendents</a> </li>
</ul>
</div>
<img src="misc/coins.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=goldeagles">Gold Eagles</a> </li>
<li><a href="index.php?menu=silvereagles">Silver Eagles</a> </li>
<li><a href="index.php?menu=morgandollars">Morgan Dollars</a> </li>
<li><a href="index.php?menu=peacedollars">Peace Dollars</a> </li>
<li><a href="index.php?menu=othercoins">Other Coins</a> </li>
</ul>
</div>
<img src="misc/crystalandcollectible.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lalique">Lalique</a> </li>
<li><a href="index.php?menu=versace">Versace</a> </li>
<li><a href="index.php?menu=antique">Antique</a> </li>
</ul>
</div>
</div>
</div>


<div id="right">
<div id="logo">
<center>
<img src="misc/logo.jpg" />
</center>
</div>

<div id="redbar"> </div>

<div id="content">
<?php
echo "$content";
?>
</div>
</div>
</div>
</body>
</html>




stylesheet file

html {
height: 100%;
}

body {
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;

}

#container {
background-color: #FBFBFB;
height: 100%;
width: 648px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

html #container {
height: 100%;
}

#left {
float: left;
width: 223px;
height: 100%;
background-color: #FBFBFB;
}


#flashbg {
position: relative; left: 0px; top: 0px;
width: 223px;
height: 190px;
background-image: url(flashbg.jpg);
}

#flash {
position: absolute; left: 7px; top: 7px;
width: 206px;
height: 171px;
}

#nav {
position: relative; left: 0px; top: 0px;
width: 223px;
background-image: url(navbg.jpg);

}


#right {
float: right;
width: 425px;

}

#logo {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 59px;
background-color: #000000;
}

#redbar {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 31px;
background-color: #9b0505;
}

#content {
position: relative; left: 0px; top: 0px;
height: 100%;
width: 425px;
background-color: #FBFBFB;
}





nav2 {
width: 150px;
}

ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
#nav2 li a {
display: block;
color: #000;
text-decoration: none;
width: 90%;
}
#nav2 li a:hover {


background-color: #2586d7;
color: #fff;
}

viewable at; http://ween.net/markscoinsandjewlery
Thanks!!

Troy297
Jan 7th, 2007, 10:31 PM
Ok well your problem is pretty obvious to me..... you have set your left column to 100% height... what you need to do is play around and figure out exactly what the height is and then set the right hand columns height to the same pxs.

aebstract
Jan 7th, 2007, 10:37 PM
no no, I want it to be able to change depending on how much content is there. So that if the content extends past the nav, there should just be a blank color that fills in under the nav, rather than blue.


edit: also, I added content in to the home page and it extends past the end of the content, please take a look and help if you can.

Majoracle
Jan 7th, 2007, 10:48 PM
The easiest way to do this without making a table is to make a solid red background image that is 1px (or whatever you want) high, and whatever you want the width of the left column to be (223px). Then, make the container background:

background:#FBFBFB url('left_col_bg_img.gif') 0 0 repeat-y;

make the left column background transparent, and then add a clearfix class and add the class to you container <div>:


.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/* hides from IE */
* html .clearfix {
height:1%;
}

<div id="container" class="clearfix">

aebstract
Jan 7th, 2007, 10:57 PM
I did exactly what you said and it didn't change anything. Here is the updated code:


index-

<?php
$menu = $_GET['menu'];

if (isset($menu)) {
include ("$menu.php");
} else {
include ("home.php");
}

?>
<html>
<head>
<title>Mark's coins & jewlery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="misc/stylesheet.css" rel="stylesheet" type=text/css title=default />
</head>
<body>
<div id="container" class="clearfix">

<div id="left">
<div id="flashbg">
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="206" height="171">
<param name="movie" value="misc/movie.swf">
<param name="quality" value="high">
<embed src="misc/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="206" height="171"></embed>
</object>
</div>
</div>
<div id="nav"><br />
<img src="misc/ladiesjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lrings">Ladies Rings</a> </li>
<li><a href="index.php?menu=lnecks">Ladies Necklaces</a> </li>
<li><a href="index.php?menu=lwatches">Ladies Watches</a> </li>
<li><a href="index.php?menu=lbpp">Ladies Brooches, Pins & Pendents</a>
</li>
<li><a href="index.php?menu=lbracelets">Ladies Bracelets</a> </li>
<li><a href="index.php?menu=purses">Purses</a> </li>
</ul>
</div>
<img src="misc/mensjewlry.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=mrings">Mens Rings</a> </li>
<li><a href="index.php?menu=mchains">Mens Chains</a> </li>
<li><a href="index.php?menu=mbracelets">Mens Bracelets</a> </li>
<li><a href="index.php?menu=mwatches">Mens Watches</a> </li>
<li><a href="index.php?menu=mpendents">Mens Pendents</a> </li>
</ul>
</div>
<img src="misc/coins.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=goldeagles">Gold Eagles</a> </li>
<li><a href="index.php?menu=silvereagles">Silver Eagles</a> </li>
<li><a href="index.php?menu=morgandollars">Morgan Dollars</a> </li>
<li><a href="index.php?menu=peacedollars">Peace Dollars</a> </li>
<li><a href="index.php?menu=othercoins">Other Coins</a> </li>
</ul>
</div>
<img src="misc/crystalandcollectible.jpg" /><br />
<div id="nav2">
<ul>
<li><a href="index.php?menu=lalique">Lalique</a> </li>
<li><a href="index.php?menu=versace">Versace</a> </li>
<li><a href="index.php?menu=antique">Antique</a> </li>
</ul>
</div>
</div>
</div>


<div id="right">
<div id="logo">
<center>
<img src="misc/logo.jpg" />
</center>
</div>

<div id="redbar"> </div>

<div id="content">
<?php
echo "$content";
?>
</div>
</div>
</div>
</body>
</html>



css-

html {
height: 100%;
}

body {
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;

}

#container {
background:#FFF 0 0 repeat-y;
height: 100%;
width: 648px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

html #container {
height: 100%;
}

#left {
float: left;
width: 223px;
height: 100%;
background-color: #FBFBFB;
}


#flashbg {
position: relative; left: 0px; top: 0px;
width: 223px;
height: 190px;
background-image: url(flashbg.jpg);
}

#flash {
position: absolute; left: 7px; top: 7px;
width: 206px;
height: 171px;
}

#nav {
position: relative; left: 0px; top: 0px;
width: 223px;
background-image: url(navbg.jpg);

}


#right {
float: right;
width: 425px;

}

#logo {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 59px;
background-color: #000000;
}

#redbar {
position: relative; left: 0px; top: 0px;
width: 425px;
height: 31px;
background-image: url(redbarbg.jpg);
}

#content {
position: relative; left: 0px; top: 0px;
height: 100%;
width: 425px;
background-color: #FBFBFB;
}





nav2 {
width: 150px;
}

ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
#nav2 li a {
display: block;
color: #000;
text-decoration: none;
width: 90%;
}
#nav2 li a:hover {


background-color: #2586d7;
color: #fff;
}