4 replies [Last post]
tzuge
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2004-08-05
Posts: 3
Points: 0

Hi,

It's been like a good three/four years since I last touched HTML so all this CSS stuff is completely new to me.

I have like a left side menu and a main content div nested inside a container div. I have all three divs with float: left and the container is stretching down as the main div extends down. I want the menu div to also change in height as the other two divs are; i want the menu to fill out the length of the container. I tried setting the menu div's height to 100% but that seems to just make the height some arbitrary value.

Mozilla firefox and IE 6 both do this, although the arbitrary value seems to be different.

loudsox04
Offline
Regular
Boston, MA
Last seen: 16 years 21 weeks ago
Boston, MA
Timezone: GMT-4
Joined: 2004-07-06
Posts: 33
Points: 0

float menu height

Hey tzuge! Try nesting the main div inside the menu div - that way when the content grows, it will bring the menu down with it. Tell me if it works! Also - what's the point of floating your container div left? - Jen

tzuge
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2004-08-05
Posts: 3
Points: 0

float menu height

I don't think that works. If I nest the main div into my menu div, I'm still going to need a div to hold my left menu stuff so then my current menu div becomes redundant with the container.

As for why I have the container floating... well, the clear: both thing isn't working for me to make the container change size with it's nested divs in mozilla so I'm using float: left for that.

Here's a page demonstrating my problem:
http://www3.telus.net/tzuge/research.htm

I need that left menu div to match height with the content one. specifying an absolute height isn't really an option since I don't want to be doing that for every single page.

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 17 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

float menu height

I am not sure if this is what you are looking for.

a main div #container
a menu div #menu
a content div #content.

And you want the #menu div to grow with th3 #content div.

The trick is to make #menu "appear" to grow. It has the same background-color: as #container, while #content has a different background-color:

**the text is just their to show #content's growth

Quote:
<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#000;
font:10pt/1.4 verdana, sans-serif;
}
#container {
width:600px;;
background:#ccc;
}
#menu {
float:left;
width:200px;
}
#content {
float:left;
width:399px;
border-left:1px solid #666;
background:#cc9;
}
#footer {
clear:left;
width:600px;
background:#600;
}
</style>
</head>
<body>
<!-- BEGIN CONTAINER -->
<div id="container">

<!-- BEGIN MENU -->
<div id="menu">
menu
</div>
<!-- END MENU -->

<!-- BEGIN CONTENT -->
<div id="content">Toronto is Canada's largest city and the provincial capital of Ontario. Its population is 2,482,000 (Torontonians) (2003 Statistics Canada estimate); that of the Greater Toronto Area (GTA) is 5,600,000 (2003). Approximately
one-third of the Canadian population lives within a five-hour drive of Toronto, and about one-sixth of all Canadian jobs lie within the city limits. The City of Toronto has a physical area of approximately 630 km² (243 square miles) and is bounded by Lake Ontario to the south, Etobicoke Creek and Highway 427 to the west, Steeles Avenue to the north, and the Rouge River to the east. The GTA extends beyond the city boundaries and includes the regional municipalities of Halton, Peel, York and Durham. The GTA is part of a
larger, natural ecosystem known as the Greater Toronto Bioregion. This ecosystem is bounded by Lake Ontario, the Niagara scarpment, and the Oak Ridges Moraine, and includes several watersheds that drain into Lake Ontario.Up until the 1970s, Toronto was the second largest city in Canada, after Montreal. The economic growth of Toronto was greatly stimulated by the completion in 1959 of the St. Lawrence Seaway which allowed ships access to the Great Lakes from the Atlantic Ocean. Further growth in the Toronto area is often attributed to the rise of the separatist movement in Quebec and the election of the Parti Québécois in 1976. The PQ enacted several French-language laws that were unfavourable towards businesses and English-speaking Montrealers, a number of which relocated to the more anglo-friendly Toronto.
</div>
<!-- END CONTENT -->

<div id="footer">footer</div>
</div>
<!-- END CONTAINER -->
</body>
</html>

tzuge
Offline
newbie
Last seen: 16 years 16 weeks ago
Joined: 2004-08-05
Posts: 3
Points: 0

float menu height

Unfortunately, that solution doesn't really work for me. I need the menu to actually grow with the container because I'm using a background image on the menu.