Hello,
In the example below, I want:
1) the "header" div to stretch and use up all available space between
"logo1" on the left and "logo2" on the right.
2) to specify a minimum width for the header so that when the window
shrinks, "logo2" doesn't drop below the "title"/"nav", and "title"/"nav"
don't drop below the "sidebar".
Does anyone have any hints on how this can be accomplished? I've tried some
absolute position to get the stretch affect, but then I can't specify a
minimum width.
Thanks,
Justin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en">
<head>
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
a:link {
color: #0F238C;
}
a:visited {
color: #74675F;
}
div#wrapper {
}
img#logo1 {
width: 224px;
height: 86px;
float: top;
}
div#sidebar {
background-color: white;
width: 224px;
padding: 3px 3px 0 3px;
float: left;
}
div#sidebar1 {
background-color: red;
float: top;
min-height: 86px;
/* TODO: If IE, use height instead of min-height */
font-size: .75em;
margin: 0 0 0 0;
}
div#sidebar2 {
background-color: green;
float: top;
min-height: 86px;
/* TODO: If IE, use height instead of min-height */
font-size: .75em;
margin: 3px 0 0 0;
}
div#sidebar3 {
background-color: blue;
float: top;
margin: 3px 0 0 0;
min-height: 86px;
/* TODO: If IE, use height instead of min-height */
font-size: .75em;
}
img.sidebar_spacer {
width: 1px;
height: 86px;
float: left;
}
div.sidebar_content {
float: left;
padding: 10px;
}
div#top {
float: clear;
}
div#header {
float: left;
height: 89px;
width: 300px;
margin: 3px 0 3px 0;
}
div#title {
float: top;
background-color: orange;
color: #74675F;
height: 41.5px;
width: 100%;
margin-bottom: 3px;
}
div#nav {
float: bottom;
background-color: yellow;
color: #FFFFFF;
height: 41.5px; /* TODO: If IE, change to 42px */
width: 100%;
}
img#logo2 {
float: right;
width: 110px;
height: 86px;
margin: 3px 3px 3px 3px;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div id="sidebar">
<img id="logo1" src="logo1.gif" alt="Logo 1">
<div id="sidebar1" class="clearfix">
<div class="sidebar_content">
SIDEBAR1
</div>
</div>
<div id="sidebar2" class="clearfix">
<div class="sidebar_content">
SIDEBAR2
</div>
</div>
<div id="sidebar3" class="clearfix">
<div class="sidebar_content">
SIDEBAR3
</div>
</div>
</div>
<div id="top">
<div id="header">
<div id="title">
Title
</div>
<div id="nav">
Navigation Links
</div>
</div>
<img id="logo2" src="logo2.gif" alt="Logo 2">
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
