...

View Full Version : 3 divs in header (can't float properly)



xspy
10-03-2007, 04:23 PM
Hi guys,
i have a simple problem, that i cannot solve for a while. Here is my code:

<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,html {
margin: 0;
padding: 0;
background-color: black;
height: 100%;
}
#main {
background-color: green;
height: 100%;
}
#header {
background-color: magenta;
width: 100%;
height: 100px;
}
#header-left {
float: left;
background-color: red;
width: 100px;
height: 100px;
}
#header-center{
float: left;
background-color: gray;
width: 500px;
height: 100px;
}
#header-right {
float: left;
background-color: blue;
width: 100px;
height: 100px;
}
-->
</style>
<title>3 DIVS</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="header-left"></div>
<div id="header-center"></div>
<div id="header-right"></div>
</div>
body -> width: 100%; height: 100%; color: black;<br />
main div -> width: 100%; height: 100%; color: green;<br />
header -> width: 100%; height: 100px; color: magenta;<br />
header-left -> float: left; width: 100px; height: 100px; color: red;<br />
header-center -> float: left; width: 500px; height: 100px; color: gray;<br />
header-right -> float: left; width: 100px; height: 100px; color: blue;<br />
</div>
</body>
</html>
Let me explain:

1. When i try to resize the window, the red and blue box divs go over and under the gray one. How i can fix that?

2. I want the red and blue box stretch all over the magenta (header div). I tried with width: auto, but it doesnt work (width: % too). The red and blue should be same width and center with fixed width.

I know that can be done very easy with this small piece of text:

<table border="1" style="width: 100%">
<tr>
<td style="background-color: red; width: auto;">left</td><td style="background-color: gray; width: 500px;">center</td><td style="background-color: blue; width: auto;">right</td>
</tr>
</table>
but i dont want to do it that way.

10x in advance.

jlhaslip
10-03-2007, 04:54 PM
<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,html {
margin: 0;
padding: 0;
background-color: black;
height: 100%;
}
#main {
width: 800px;
background-color: green;
height: 100%;
margin: 0 auto;
}
#header {
background-color: magenta;
width: 100%;
height: 100px;
}
#header-left {
float: left;
background-color: red;
width: 100px;
height: 100px;
}
#header-center{
background-color: gray;
height: 100px;
margin-left: 100px;
}
#header-right {
float: right;
background-color: blue;
width: 100px;
height: 100px;
}
-->
</style>
<title>3 DIVS</title>
</head>
<body>
<div id="main">
<div id="header">
<div id="header-left">left</div>
<div id="header-right">right</div>
<div id="header-center">centre</div>
</div>

</div>
</body>
</html> Something like this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum