Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
- CommentAuthorseasonedzeal
- CommentTimeJul 31st 2006
Here's my problem, I want to have two divs side-by-side; one a sub-navigation, and the other the main section. The sub-navigation div will have a different background color than the main section. As I fill up the main section with text and images, I want the sub-navigation background color to continue flush with the bottom of the main section. The only way I've found to get this to work is through the use of a wrapper div to give the "illusion" that the sub-navigation continues. I've tested the html below, and it works in the newest Firefox. Except, it doesn't work in many netscapes, nor does it work in Firefox 1.0. Is there a better way, or some sort of hack I can insert to make it more cross-browser compatible?
<!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>
<title>Stretchable DIV Background-Color</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Zeroing out useless browser prejudices */
html,body,img,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,pre,form,blockquote,fieldset,input { margin:0px; padding:0px; }
h1,h2,h3,h4,h5,h6,pre,code,kbd { font-size:1em; }
:link,:visited { text-decoration:none; }
table { border-collapse:collapse; border:0px; }
ul,ol { list-style:none; }
img { border:0px; }
/* Normal CSS */
.wrapper { width:760px; background-color:#96B6DA; margin-left: auto; margin-right: auto; color:#000000; }
.header { background-color:#FFFFFF; color:#000000; }
.navigation { background-color:#96B6DA; color:#000000; }
.sub-header { background-color:#E60000; color:#000000; }
.sub-navigation { width:200px; float:left; background-color:#96B6DA; color:#000000; }
.main { width:530px; float:left; background-color:#E5EAF3; text-align:justify; color:#000000; padding:15px; }
.fix { clear:both; }
</style>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="navigation">Navigation</div>
<div class="sub-header">Sub-Header</div>
<div class="sub-navigation">Sub-Navigation</div>
<div class="main">Filler text to make this div stretch, in hopes of making the "wrapper" background-color stretch, giving the illusion that "sub-navigation" is stretching</div>
<div class="fix"></div>
</div>
</body>
</html> -
you want to look up Faux Columns.
1 to 2 of 2