SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    two divs in same line inside one big div

    Hi,

    I'm trying to set up a template with two smaller divs on the same horizontal line inside one larger div tag. The problem I am having is that if I use the "float: left, float: right" commands to do this, the bigger div box doesn't size to fit the content of the smaller boxes since these boxes are now floating above the box. Is there a way to set div boxes on the same line without using tables, or will I have to set up tables to do something like this?

    Thank you!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Please post the code you are currently using with the floats, or post a link to your page if it is online.

    Floats should do what you are wanting. It sounds like you may have some width problems, hard to say without seeing the code.

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely. The site isn't live, so I'll post pictures with the code.

    Here is the code with floats:
    (in css)
    #content {
    width: 980px;
    height: auto;
    padding: 20 20 20 20;
    background-color: #00fcff }

    #package_update {
    width: 680;
    height: 500;
    float: left;
    background-color: #aaaaaa }

    #previous_update {
    width: 280;
    height: 500;
    float: right;
    background-color: #ffcc00 }

    (in index)
    <div id=content>

    <div id=package_update></div>
    <div id=previous_update></div>

    </div>

    Here is what it looks like.


    As you can see, the two "package" boxes are there, but the background for the div tag that they are in do not line up. Meanwhile, if I take the float tags out, the background will stretch to the height of the two package boxes, but the two boxes will not lay on the same line (pictured below).



    Any help is appreciated, thanks!

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You just needed to contain your floats in the parent div. Floats are removed from the normal page flow and you must force the parent to enclose them.

    overflow:hidden; applied to the parent is the easiest way to do that.

    You were also missing the px values on your width/height rules.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo Layout</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.3 arial,helvetica,sans-serif;
    }
    #content {
        width: 980px;
        margin:0 auto;
        padding: 20px;
        overflow:hidden;/*contain child floats*/
        background: #00fcff; 
    }
    #package_update {
        width: 680px;
        height: 500px;
        float: left;
        background: #aaaaaa;
    }
     
    #previous_update {
        width: 280px;
        height: 500px;
        float: right;
        background: #ffcc00;
    }
    </style>
     
    </head>
    <body>
     
    <div id="content">
        <div id="package_update"></div>
        <div id="previous_update"></div>
    </div>
     
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! You're the best.


Bookmarks

Posting Permissions

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