#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    4
    Rep Power
    0

    Responsive nested div layout


    Hi guys,

    I have a small project to do - Im producing a layout for search listing results.

    I have a main wrapper div - inside of that are 3 div's - the leftmost is 16px wide- the next is 100px wide and the 3rd inside this needs to be the rest of the main wrappers width - but I cant seem to get it to work - it keeps dropping down below the other 2...

    Any help would be greatly appreciated!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0

    Sounds like it's too big


    Posting your code so far would probably help clear things up but this is usually the issue...

    Say your main wrapper is 300px
    <---------------------- 300px ----------------->
    <-- 10px --> <---100px---><---------?--------->

    that last div cannot be more than 190px without drpping below the 10 and 100px divs.

    to get them side by side I imagine you used something like display: inline-block; ?

    If so, in some browsers like Chrome I believe it adds some padding to the divs be default so even though you have the last div set to 190px it will be 194px wide, therefore pushing it below.

    Hope this helps.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68

    Use Percentages


    try this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>three columns</title>
    
    <style type="text/css">
    em {font-size:150%;  color: white; }
    div       { float: left; margin: 0 2%; text-align:center; }
    
    div:after { visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;}
                
    .wrap-div { width: 100%; padding:10em 1%; max-width:1140px; margin:0 auto;  }
       .col-1 { width: 10%; background:blue; }
       .col-2 { width: 50%; background:red;}
       .col-3 { width:28%; background:grey;}
    
    </style>
    </head>
    
    <body>
    <div class="wrap-div">
      <div class="col-1"><em>10% column</em></div>
      <div class="col-2"><em>50% column</em></div>
      <div class="col-3"><em>28% column</em></div>
    </div>
    </body>
    
    </html>
    Part of the basics for responsive web design is to use percentages. The markup supplied is a basic three column layout.
    The floated divs will not break even when there content breaks out of there parent container (this is where media queries come in.) because they all add up to 100%. Note that I am including the 2% margin I added for all divs

    this article is a good base for learning the fundamentals of responsive web design:

    http://alistapart.com/article/fluidgrids
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    4
    Rep Power
    0

    Smile


    Thanks heaps guys!

    Worked out my main problem was not to float the responsive column - but to give it a margin to move it away from the fixed columns.. worked a treat.

    Thanks again!!

IMN logo majestic logo threadwatch logo seochat tools logo