Log in

View Full Version : spread to the edge of the browser


The_Alligator
12-07-2009, 11:15 AM
<div id="Div1">
<div id="Div2"></div> <---of height 20px
<div id="Div3"></div><---of height 20px
</div>

I want all these <div> tags to spread to the edge of the browser and with a gap in between .

what CSS to apply to these div's ?
the penguin
12-07-2009, 03:44 PM
Something like this?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
body {
margin: 0;
padding: 0;
}
#Div1 {
margin: 0;
padding: 0;
float: left;
height: 20px;
background-color: red;
width: 45%
}
#Div2 {
margin: 0;
padding: 0;
float: left;
height: 20px;
background-color: blue;
width: 10%
}
#Div3 {
margin: 0;
padding: 0;
float: right;
height: 20px;
background-color: green;
width: 45%
}
</style>

</head>

<body>

<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>


</body>
</html>
The_Alligator
12-07-2009, 04:59 PM
No, not like that....not all of them in the same line.

Red should spread to the end

blue will be down to the red . blue will also spread to the end

green will be down to the red . green will also spread to the end.
the penguin
12-07-2009, 06:03 PM
Change the above width's to 100% on each div.