Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Location
    United States
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Float and autosize divs to fill container

    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;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,034
    Thanks
    23
    Thanked 589 Times in 588 Posts
    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>

  • Users who have thanked sunfighter for this post:

    BlueGhost79 (10-21-2012)

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Location
    United States
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,034
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Your welcome. Glad I helped. It actually was fun to do.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •