2

I've split my page into two vertical divs, each containing a number of nested divs wrapped so that they resize preserving a set ratio. That works great - but for some reason the divs on the left end up shorter than the divs on the right! The CSS is consistant, but something's not...

You can see a gap appear at the foot of the left-hand column here:

http://jsfiddle.net/VsJLs/

Is it clear what's wrong? Thank you for looking!

<head>
<style type="text/css">
.break {
padding-top: 25px;
}
.leftcol {
width: 50%;
position: absolute;
top: 0px;
left: 25px;
}
.leftpad {
padding-right: 38px;
}
.rightcol {
width: 50%;
position: absolute;
top: 0px;
right: 25px;
}
.rightpad {
padding-left: 37px;
}
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 161.3%;
display: block;
background-color: red;
content: '';
}
</style>
</head>

<body>

<div class="leftcol">
<div class="leftpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>

<div class="rightcol">
<div class="rightpad">
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
<div class="break"></div>
<div class="wrapper"></div>
</div>
</div>

</body>
</html>

I've tried zeroing margins as suggested below but that doesn't improve things. It seems like the problem could lie with the padding-top: 161.3%; property. Changing % to px fixes that creeping misalignment - but I need to keep it as a percentage! Can anybody figure this out? Thanks for your time.

Joshua
  • 40,822
  • 8
  • 72
  • 132
Suresure
  • 143
  • 11

2 Answers2

1

The problem is caused due to the margin border; set it to 0 or same on all sides:

MARGIN
{BORDER=0;
}
David Robinson
  • 77,383
  • 16
  • 167
  • 187
Sugunan Mp
  • 11
  • 8
  • http://stackoverflow.com/questions/15072409/columns-of-nested-divs-with-the-same-set-ratio-rendering-at-slightly-different-h/15072452#15072452 – Sugunan Mp Feb 25 '13 at 17:24
  • A friendly recommendation- please avoid using all caps on StackOverflow, as it's generally considered unprofessional. – David Robinson Feb 25 '13 at 17:31
  • Thanks both very much - I'm embarrassed to ask, but could you place that into the jsfiddle above and repost it? I've tried defining the margin but can't see any change. This seems hopeful though, thanks. – Suresure Feb 25 '13 at 17:45
1

I figured it out - I mean: I know the problem but I'm still not sure why... The gutter I created was split unevenly:

.leftpad {
padding-right: 38px;
}

and

.rightpad {
padding-right: 37px;
}

If both those are equal (http://jsfiddle.net/VsJLs/1/) then there's no slip. Now I'm worried about creating columns this way - that's another question though...

Suresure
  • 143
  • 11