Responsive nested div layout

Dev Shed Forums Sponsor:

January 28th, 2013, 09:34 PM

kylane

Registered User

Join Date: Jan 2010

Posts: 4

Time spent in forums: 25 m 23 sec
Reputation Power: 0

New Member - 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!

January 29th, 2013, 12:49 AM

khayhurst

Registered User

Join Date: Jan 2013

Posts: 10

Time spent in forums: 3 h 16 m 38 sec
Reputation 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.

January 29th, 2013, 12:51 PM

Paul-Ninja

Contributing User

Join Date: Jun 2012

Location: Troy, NY

Posts: 36

Time spent in forums: 15 h 34 m 35 sec
Reputation Power: 67

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

January 29th, 2013, 05:23 PM

kylane

Registered User

Join Date: Jan 2010

Posts: 4

Time spent in forums: 25 m 23 sec
Reputation Power: 0

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!!

New Member - Responsive nested div layout

Developer Shed Advertisers and Affiliates