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?

Code:

<!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.

Thread: spread to the edge of the browser

Thread Tools

Search Thread

spread to the edge of the browser

Bookmarks

Bookmarks

Posting Permissions