Skeleton framework - my div is wrapping - codepen provided

HTML & CSS
1

Hi i have two divs on one line. one that is 1/3 width and another that is 2/3 width. why do they not fit on the same line.

2

The columns are coded to have widths that total a little less than 100%. But they have a margin-left of 4% being added to those widths for a grand total of well over 100%. Thus, they wrap.

Revisit the box model if you need a refresher:
content width +
padding width +
border width +
margin width = full width of a box

If your page uses {box-sizing:border-box}, then remember that margins are outside of and should be added to the width of the border-box to determine the full width of the box.

3 Likes
3

Right but I didnt add the margin left, the framework did, thats why i asked expected it to work out of the box without any tinkering… thanks though, i think im getting closer

4

It would work out of the box but you opened the box and threw away some important pieces:)

When you use a framework you must follow the rules of the framework exactly.

 <!-- columns should be the immediate child of a .row -->
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>

When a column is a first child its left margin is removed by the framework. If you don’t follow the correct procedure then you will get a margin on the first column.

Always follow the docs. :slight_smile:

4 Likes
5

Ahh I see what I did wrong.
I had the twelve column div incorrectly adjacent to the one-third column div which was adjacent to a 2/3rd column div, so it was wrapping.
And because my 1/3 and 2/3 column div wasn’t in its own row it took the left margin since it was a part of the 1st row that spanned twelve columns.
I think I have to take breaks so i have fresh eyes for my code. Thanks a lot everyone.

So instead of:

 <!--Middle Row-->
  <div class="row">
    
  <!--Top Row-->  
  <div class="twelve columns top">
    <h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
  </div>

    <!--Navigation-->
   <div class="left-nav one-third column"> 
    </div>
 <div class="right-content two-thirds column"> 
       
    </div>
</div>

the answer should be instead:

 <!--Middle Row-->
  <div class="row">
    
  <!--Top Row-->  
  <div class="twelve columns top">
    <h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
  </div>
</row> 
<div class="row">
    <!--Navigation-->
   <div class="left-nav one-third column"> 
    </div>
 <div class="right-content two-thirds column"> 
       
    </div>
</div>
2 Likes
6

I know nothing of skeleton, but are you sure those </row> tags are correct?

3 Likes
7

They should of course be a closing </div> for the row and not </row> as that tag doesn’t exist :slight_smile: I’m guessing it’s just a typo and was meant to be </div>.

1 Like
8

Correct its a typo, i updated it. Thanks a lot for your patience.

3 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.