Float and autosize divs to fill container

BlueGhost79 · 10-21-2012, 01:32 AM

Hi,
I am just learning css and as an exercise I am creating an American flag.
I have several divs that I color, 1 is dark blue for the top left, and the rest are red or white.
I want the red and white divs to auto size to fill the wrapper div. For example, if the dark blue width is 20%, i want the red and white divs to auto size to 80% and the ones below it to auto size to 100%.

I have the following but of course, the red and white are only 80%. I know i can do it by creating 2 kinds of red and white divs but i would rather not.

Below is what i have:

Code:

body {
	font-family: Arial, Helvetica;
	font-size: 12px;
}

#wrapper {
	margin: 0px;
	width: 760px;
	margin-left: auto ;
  	margin-right: auto ;
}

#stars {
	width: 100%;
	background: #00008B;
	height: 100px;
	width: 20%;
	float: left;
}

div.red_stripe {
	border-style: none;
	background: #8C1717;
	width: 100%;
	height: 50px;
	float: left;
	display: inline;
}

div.white_stripe {
	background: #FFFFFF;
	border-style: none;
	width: 100%;
	height: 50px;
	float: left;
	display: inline;
}

sunfighter · 10-21-2012, 03:01 AM

In the four divs you show you only need 4 rules each for each of them; the background, height, width, and the float. The other stuff you have are default values and you don't have to wear your wrist out writing them. In the #wrapper you have three margins. Not needed delete all 3 and use margin: auto ;
the width of your stripes Both should be 80%. You have then at 100% and none of them can fit next to you starts and will live just under them. So we should have this:

Code:

#wrapper {
	margin: auto ;
        width: 760px;
}

#star{
	background: #00008B;
	height: 100px;
	width: 20%;
	float: left;
}
.red{
	background: #8C1717;
	width: 80%;
	height: 15px;
	float: left;
}
.white{
	background: #aaa;
	width: 80%;
	height: 15px;
	float: left;
}

As you can see I changed the names cause I hate writing. And the color cause I could not see the white against my white back ground.

But what happens to the next strips that don't have the blue box to take up 20% of the wrapper. We could make two more types of strips at 100% for those or....

First there are 7 strips next to the stars. We need to reduce the height of our strips and make the height times 7 equal the height of the blue box. Easy way to do this is to change stars to 105px and the stripes to 15px. Then copy the red and white stripe and paste it six time. Oh one too many, delete the last white one.

Almost good. The stripes next to the box are great the other 6 are not long enough.
Lets put the first 7 in another div named #topStrips. Set the width of the width to 80% and height equal to the blue box. Next put the first seven strips in there. Then make the strips 100%.

The first strips are 100% of the #topStrips div and that is 80% of the wrapper. So 100% of 80% is 80%; the top stripes are 80% of the wrapper. The bottom 6 are 100% of the wrapper. Final code and HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#wrapper {
	margin: auto ;
	width: 760px;
}
#star{
	background: #00008B;
	height: 105px;
	width: 20%;
	float: left;
}
.red{
	background: #8C1717;
	width: 100%;
	height: 15px;
	float: left;
}

.white{
	background: #aaa;
	width: 100%;
	height: 15px;
	float: left;
}
#topStrips{
	width: 80%;
	height: 105px;
	float:left;
}
</style>
</head>

<body>
<div id="wrapper">
	<div id="star"></div>
	<div id="topStrips">
		<div class="red"></div>
		<div class="white"></div>
		<div class="red"></div>
		<div class="white"></div>
		<div class="red"></div>
		<div class="white"></div>
		<div class="red"></div>
	</div>
	<div class="white"></div>
	<div class="red"></div>
	<div class="white"></div>
	<div class="red"></div>
	<div class="white"></div>
	<div class="red"></div>
</div>
</body>
</html>

BlueGhost79 · 10-21-2012, 04:50 AM

Thank you Sunfighter, you actually helped me out alot with the cascading concept and containers. I'm new to this so every window opened is a big help.

sunfighter · 10-21-2012, 03:54 PM

Your welcome. Glad I helped. It actually was fun to do.