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
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get a div inside a div

    Hi all,

    Very new to CSS. Currently reading "CSS, The Missing Manual". Overall, it's been good, but I can't get this to look right.

    I want these four boxes - which I tagged as div's inside a larger div. I believe it's something that I don't understand with floats, but I'm not sure how to solve it. Here's the code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Background Images</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <style type="text/css">

    body {
    background-color:#006699;
    }

    h3 {
    font-family:Arial, Helvetica, sans-serif;
    color:#003F84;
    font-weight:bold;
    font-size:25px;
    }

    h4 {
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-weight:bold;
    font-size:16px;
    }

    p {
    font-family:Arial, Helvetica, sans-serif;
    color:#003F84;
    font-weight:bold;
    font-size:15px;
    }


    .container {

    width:940px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    margin:0 0 0 100px;
    padding:25px 25px 25px 25px;

    }

    .box1 {

    float:left;
    width: 200px;
    height:310px;
    text-align:center;
    margin-top:75px;
    margin-left: 40px ;
    margin-right: auto ;
    background-color:#E6E6E6;
    padding: 5px 5px 5px 5px;
    border: 1px solid #6D7B8D;

    }

    .box2 {
    float:left;
    width: 200px;
    height:310px;
    text-align:center;
    margin-top:75px;
    margin-left: auto ;
    margin-right: auto ;
    background-color:#E6E6E6;
    padding: 5px 5px 5px 5px;
    border: 1px solid #6D7B8D;

    }

    .box3 {
    float:left;
    width: 200px;
    height:310px;
    text-align:center;
    margin-top:75px;
    margin-left: auto ;
    margin-right: auto ;
    background-color:#E6E6E6;
    padding: 5px 5px 5px 5px;
    border: 1px solid #6D7B8D;

    }



    .box4 {
    float:left;
    width: 225px;
    height:360px;
    text-align:center;
    margin: 50px 0px 0 -2px;
    background-color:#E6E6E6;
    padding: 5px 5px 5px 5px;
    border: 2px solid #6D7B8D;

    }

    .box hr {
    background-color:#6D7B8D;
    height:1px;
    }

    .bigbox hr {
    background-color:#6D7B8D;
    height:1px;
    }





    </style>
    </head>
    <body>


    <div class="container">

    <div class="box1">
    <h3>
    FREE
    <br>
    $0
    <hr>
    <h4>
    5 Levels of Access
    </h4>
    <p>
    Just want to look around?
    </p>
    <br>
    <img src="images/redsignup.png">
    <br>
    <a href="http://thepracticeroom.net">Learn more...</a>
    </div>

    <div class="box2">
    <h3>
    MONTHLY
    <br>
    $9.95
    <hr>
    <h4>
    Full Access for 1 Month
    </h4>
    <p>
    Need to cram for an upcoming audition?
    </p>
    <img src="images/redsignup.png">
    <br>
    <a href="http://thepracticeroom.net">Learn more...</a>
    </h3>
    </div>




    <div class="box3">
    <h3>
    ANNUAL
    <br>
    $59.95
    <hr>
    <h4>
    Full Access for 1 Year
    </h4>
    <p>
    Want to become a Sight Singing Zen Master?
    </p>
    <img src="images/redsignup.png">
    <br>
    <a href="http://thepracticeroom.net">Learn more...</a>
    </h3>
    </div>


    <div class="box4">
    <h3>
    EDUCATOR
    <br>
    $99.95
    <hr>
    <h4>
    Full Access for 1 Year
    <br>
    All Reproducible ebooks
    <br>
    Online Quizzes
    </h4>
    <p>
    Help your students become AMAZING Sight Singers!
    </p>
    <img src="images/redsignup.png">
    <br>
    <a href="http://thepracticeroom.net">Learn more...</a>
    </h3>
    </div>

    </div>

    </body>

    </html>

    I've attached a picture of what it looks like now. I just want the four gray boxes inside the box with the black border.

    What am I doing wrong?

    Thanks in advance for any help.
    Attached Thumbnails Attached Thumbnails Can't get a div inside a div-picture-11.jpg  

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Posts
    271
    Thanks
    3
    Thanked 40 Times in 40 Posts
    Add the display:inline


    .container {
    display:inline;
    width:940px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    margin:0 0 0 100px;
    padding:25px 25px 25px 25px;

    }

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help. That actually didn't work. It made the box with the black border disappear.

    I tried overflow:hidden, and that seemed to do it.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,038
    Thanks
    15
    Thanked 240 Times in 240 Posts
    If something is a container of several other elements you can simplify things by giving it an ID, which is preferable for several reason. Then you can code it like this:

    #container div

    or ever better

    #container div.box {float:left}

    then you can use javascript get element by ID, get element by tag name. If you give the boxes IDs you can further specify.


  •  

    Posting Permissions

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