Dev Shed Forums

**kylane**

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!

**khayhurst**

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.

**Paul-Ninja**

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

**kylane**

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

Dev Shed Forums

Thread: Responsive nested div layout

Responsive nested div layout

Sounds like it's too big

Use Percentages