This is driving me crazy now. I am using Skeleton Responsive although I don't think that's causing the issue.

 

This is my code

<div class="container">
<div class="sixteen columns outer_holder clearfix">
<div class="twelve columns"> 
<h2>Title</h2>
<p>Content Here</p>
</div>
<div class="four columns"><a href="#" class="button">View More</a></div>
</div>
</div>

When I add padding to the outer div "outer_holder" the two divs inside no longer float, If i remove padding all is fine.

 

here is my css

 

.outer_holder {
 border: 1px solid #eaeaea;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

 

 

This is driving me crazy now. I am using Skeleton Responsive although I don't think that's causing the issue.

 

This is my code

<div class="container">
<div class="sixteen columns outer_holder clearfix">
<div class="twelve columns alpha"> 
<h2>Title</h2>
<p>Content Here</p>
</div>
<div class="four columns omega"><a href="#" class="button">View More</a></div>
</div>
</div>

When I add padding to the outer div "outer_holder" the two divs inside no longer float, If i remove padding all is fine.

 

here is my css

 

.outer_holder {
 border: 1px solid #eaeaea;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

I'm not familiar with Skeleton Responsive. I've not had to look for frameworks since Bootstrap is working out so well for me.

 

So with only reading what you've written, I can only suggest two potential solutions.

 

First, could it be your border on the outer holder that is causing an issue? Borders can add extra width and throw out a carefully assigned percentage or something, but that is unlikely since the problem is on the inside.

 

Second, if Skeleton Responsive sets hard calculated widths of your divs, then the border-box controlled padding may be reducing their calculated with and knocking one down a line. If that's the case then I really don't know what to suggest outside of adding an !important tag onto your width options maybe.

 

 

Sorry if this isn't much help. Maybe it will set you on the right track.

You seem to have answered the question yourself. The padding is widening your element meaning they no longer sit by side.

 

If you are nesting columns, have you tried adding .alpha to your left column and .omega to your right column?

I know skeleton quite well.

 

As a rule of thumb.

 

The container sets the width to 960

 

The subbordinate divs take the area within the 960

 

ie

 

container

two-thirds col one-third col

 

 

don't nest any more than that. Also close the divs and start and new container.

 

Hope this helps.

Edited March 6, 201412 yr by Refresh Websites