make div match other divs height

vasox56 · May 17, 2007

im trying to make the 'bleft' div have a height of 100%..

i would need the 'bleft' div to vertically end where the 'bright' div vertically ends..

can this be done?

here is the div layout and url

Stylesheet

Code:

* {
  margin:0;
  padding:0;
}

body {
 background-color:#EBEBEB;
 text-align:center;
}


div#wrap {
 width:750px;
 margin:auto;
 position:relative;
 border:1px solid #666666;
 background-color:#ffffff;
 text-align:left;
}

div#top	{
 width:750px;
 height:161px;
 background-color:#616161;
}

div#bleft {
 width:223px;
 background-color:#4A4C4A;
 float:left;
 border:1px solid #666666;
 border-top: 0px solid;
 border-left: 0px solid;
 border-bottom: 0px solid;
}

div#bright {
 width:524px;
 background-color:#fff;
 float:right;
 text-align:left;
}

div#main {
 width:750px;
 background-color:#ffffff;
 clear:both;
}

div#menu .bccor {
 border-color:#ffffff #ffffff #ffffff #ffffff;
}

ul#nav {
 list-style-type:none;
}

ul#nav li.outerLi {
 border-width:1px 1px 1px 1px;
 border-color:#ffffff #b3b3b3 #b3b3b3 #ffffff;
 border-style:solid;
 position:relative;
 font-family:arial;
 float:left;
 font-size:80%;
 color: #666666;
 width:73px;
 background:white;
 text-align:center;
}

a {
 color: #666666;
 text-decoration: none;
}

a.baitlink {
 color:#fff;
 text-decoration: underline;
}

ul#nav li ul {
 list-style-type:none;
 display:none;
 position:absolute;
 left:-1px;
 top:23px;
 width:75px;
}

ul#nav li {
 position:relative;
}

ul#nav li li {
 line-height:23px;
 border:1px solid #ccc;
}

ul#nav li ul ul{
 position:absolute;
 left:74px;
 top:0px;
 background:#fff;
 width:74px
}

ul#nav li  a {
 display:block;
 line-height:17px;
 padding:3px 0 3px 0 ;
}

/* mac hide \*/

ul#nav li  a {
 height:1%
 }

/* end hide */

div#menu ul li ul {
 display:none;
 }

ul#nav li ul li a {
  background: #EBEBEB;
  display:block;
}

ul#nav li ul li a:hover {
  background-color:#666666;
  font-family:arial;
  color: #F99C08;
}

ul#nav li:hover ul ul, ul#nav li.over ul ul {
 display:none;
 }

ul#nav li:hover ul, ul#nav li.over ul,
ul#nav li li:hover ul, ul#nav li li.over ul {
 display:block;
}

.text {
 float:left;
 margin-top:30px;
 width:600px;
}

/* clear without structural mark-up */
.clearfix:after {
  content:"."; 
  display:block; 
  height:0; 
  clear:both; 
  visibility:hidden;
}

.clearfix {
  display:inline-block;
}

 /* mac hide \*/

 * html .clearfix {
  height: 1%;
  }

.clearfix {
 display: block;
 }
 /* End hide */

Page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Layout Test</title>

<link rel="stylesheet" type="text/css" href="css-test.css" media="all" />

</head>

<body>

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

	<div id="top">
		<img class="logo" src="xxlogo.jpg" alt="London Heathrow Cars Header" />
	</div>

	<div id="bleft">
	<br /><br />
	</div>


	<div id="bright">
		<ul id="nav">
            <li class="outerLi"><a href="index.asp">Home</a></li>
            <li class="outerLi"><a href="transfer-service.asp">Services</a>
				<ul>
                    <li><a href="airport-transfers.asp">Airport Transfers</a></li>
					<li><a href="seaport-transfers.asp">Seaport Transfers</a></li>
					<li><a href="executive-chauffeur.asp">Executive Travel</a></li>
					<li><a href="day-hire.asp">Day Hire</a></li>
					<li><a href="london-tour.asp">Tour of London</a></li>
                </ul>
			</li>
			<li class="outerLi"><a href="heathrow-accounts.asp">Accounts</a></li>
            <li class="outerLi"><a href="transfer-fleet.asp">Fleet</a></li>
			<li class="outerLi"><a href="transfer-faqs.asp">Faqs</a></li>
            <li class="outerLi"><a href="transfer-booking.asp">Bookings</a></li>
			<li class="outerLi"><a href="transfer-enquiry.asp">Enquiries</a></li>
        </ul>

	</div>

</div>

</body>

</html>

the page can be seen here..

http://londonheathrowcars.com/css-test.htm

ascotta · May 17, 2007

I am fairly sure this has been covered her, cos thats where I got my solution

JavaScript:

function setheight()
{
         var lhs = document.getElementById('main').style.height;
         var rhs = document.getElementById('rightbar').style.height;
         if (lhs > rhs)
         {
           document.getElementById('rightbar').style.height=document.getElementById('main').offsetHeight + "px"; 
     }
          else
    {   
            document.getElementById('main').style.height=document.getElementById('rightbar').offsetHeight + "px";
    }
}

use onload="setheight()" in your page body load

Well it worked for me.

[blue] A perspective from the other side!![/blue]

Cheers
Scott

Foamcow · May 18, 2007

You may also want to look at what is known as the 'Faux Columns Method' to give the appearance of balancing columns.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

vasox56 · May 18, 2007

yes.. that has worked thank you.. i will look into the faux columns method aswell.. thank you

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

make div match other divs height

vasox56

Technical User

ascotta

Vendor

Foamcow

Programmer

vasox56

Technical User

Similar threads

Part and Inventory Search

Sponsor