PDA

View Full Version : Need help: Height of <div> contingent with other div

SDP2006
05-20-2004, 01:47 AM
http://stevie.f2o.org/page.php

If you'll see there on the right content div, it is not conforming to the height of the other div to left of it. Can anyone see or tell me any appendages I need to make to my stylesheet to fix this?

Thanks to all. :)
Unit
05-20-2004, 02:01 AM
You have float:left to the right div??
SDP2006
05-20-2004, 02:11 AM
Heh, sorry. I forgot to update the one on the web. Refresh it.

Still produces the same problem though.
mindlessLemming
05-20-2004, 02:16 AM
When the #main float becomes to wide to allow #right to fit in the viewport, #right will be pushed beneath. This is the correct behaviour according to spec.

This will put the right column on the right and also allow the layout to work on smaller resolutions than 1024

#main {
font-size: 10pt;
width: 65%;
float: left;
padding: 4px;
}
#right {
float: right;
border-left: 1px solid black;
width: 30%;
height:auto;
font-size: 10pt;
padding: 4px;
background: #dddddd;

}


As for making the right column the same height as main, you would need to float the right col from inside #main, using a negative right margin to pull it out of #main. The margin needs to be at least 1px less than the width of #right.
You would then set #right's height to 100% (and then height:auto; after for safety).
A claring div would also need to be added to the bottom of #main incase #right was longer than content.
<div style="clear:both; height:1px; margin-bottom:-1px;">&nbsp;</div>

:)
SDP2006
05-20-2004, 03:09 AM
Thanks, but that last part kinda confused me. Could you edit this <html>
<head>
<title>{name} Control Panel</title>
</head>
<style type="text/css">
body { margin: 0px; font-family: Tahoma, sans-serif; }
#top {
background: #cccccc;
font-size: 10pt;
padding: 4px;
border-bottom: 1px solid black;
}
#main {
font-size: 10pt;
width: 65%;
float: left;
padding: 4px;
}
#right {
float: right;
border-left: 1px solid black;
width: 30%;
height:auto;
font-size: 10pt;
padding: 4px;
background: #dddddd;

}
#bottom {
background: #cccccc;
font-size: 10pt;
padding: 4px;
border: 1px solid black;
border-right: 0px;
border-left: 0px;
clear: both;
}
a { color: black; }
a:hover { text-decoration: none; }
h1 {
color:#333;
font:1.6em/1 Tahoma, sans-serif;
font-weight:900;
margin: 0;
font-variant: small-caps;
border-bottom: 2px dotted #ccc;
}
#double { line-height: 25px;}
</style>
<body>

<div id="top"><h1 style="margin: 0; color: maroon;">{name} Control Panel</h1>{nav}</div>
<div id="main">{main}</div>
<div id="right">{right content}</div>
<div id="bottom">{footer} - {timer}</div>
</body>
</html> and make those changes to it? I couldn't seem to figure it out.

Thanks :)
mindlessLemming
05-20-2004, 03:42 AM
Thanks, but that last part kinda confused me. Could you edit this and make those changes to it? I couldn't seem to figure it out.

I'd like to, but I'm too pressed for time.
Here's a full walk through for a 3 col. version
http://www.pmob.co.uk/temp/3colfixedtest_explained.htm
SDP2006
05-20-2004, 01:01 PM
Thanks!
se4b4ss
05-20-2004, 02:22 PM
did you figure it out. i'd like to see your solution if so.

regards,
steve
SDP2006
05-21-2004, 02:19 AM
No, I didn't. But I started over from scratch and came out with something better. :thumbsup:
se4b4ss
05-21-2004, 02:30 AM
going to share it?
SDP2006
05-21-2004, 01:01 PM
http://stevie.f2o.org/n_index.php (firefox/mozilla/netscape only please)