www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem stretching the content around a parent div

  1. #1
    Join Date
    Mar 2012
    Posts
    3

    Problem stretching the content around a parent div

    Hi!

    I'm learning html and css, and I always use clear:both at the end of a container to strech it. However since the parent div has a margin child, it does not stretch. Could anybody explaim me why, and how to solve it?

    here is how my css looks:
    * {
    margin: 0px;
    padding: 0px;
    background-color: black;
    }

    body {
    width: 900px;
    margin: 50px auto auto auto;
    position: centered;
    }

    .container {
    background-color: white;
    overflow:auto;
    }

    .block{
    float: left;
    width: 600px;
    }

    .blue.square {
    float: left;
    height:300px;
    width: 300px;
    background-color:blue;
    }

    .red.stripe {
    float: left;
    height:75px;
    width:100%;
    margin:75px 0px 0px;
    background-color: red;
    }

    .star {
    float: left;
    margin: 50px;
    width: 50px;
    height: 50px;
    }

    .clear {
    clear: both;
    }


    here is the html

    <html>
    <head>
    <title>Exercise 3.1</title>
    <link type="text/css" href="index.css" rel="stylesheet">
    </head>
    <body>
    <div class="container">
    <div class="blue square">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    </div>
    <div class="block">
    <div class="red stripe"></div>
    <div class="red stripe"></div>
    </div>
    <div class="clear"></div>
    <div class="red stripe"></div>
    <div class="red stripe"></div>
    <div class="clear"></div>
    </div>
    </body>
    </html>

    Thank you

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You could have been more accurate. Which is your problem, after all? Can you detail a little bit?

    Note: your document has no Doctype. Doctype is required. Give a Google for it.
    Last edited by Kor; 04-22-2012 at 11:41 AM.

  3. #3
    Join Date
    Mar 2012
    Posts
    3
    I want the the container to expand around the block and blue.square, but since both div contain margin it does not expand. If I remove the margin the ccs file it expands, but it doesnt expand with the margin. I want to know how i can expand the container while keeping margin.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles