Search code examples
htmlcssblueprint-css

Adding padding around some text into two div columns (content, sidebar). Sidebar column moves under the Content column

I'm adding padding around some text into two div columns (content, sidebar). Sidebar column moves under the Content column.

I'm still learning (though I think I'd like to think of myself somewhere between a beginner and intermediate).

Right now, I'm using the blueprint framework for the layout. I have the content column at 15 and the side bar column at 8. Whenever I try to add padding on the right side of each DIV, it causes the side bar to move under the content.

The only fix I could find was to set the width of the sidebar column and make it float to the right.

I thought the purpose of Blueprint was so that I didn't have to set anything for the columns, just add the column class to each div that needs it?

Here is a fiddle: jsfiddle

Here is my HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>CogRobot Studios</title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
    <!--[if IE]>
     <link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
  </head> 

  <body>
    <div id="wrap" class="rounded-corners container">
    <div id="header" class="rounded-corners column span-24 last">
      <img src="images/header.gif" alt="Starbuzz Coffee header image" />
    </div>

    <div id="content" class="column span-15 colborder last">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

    </div>

    <div id="sidebar" class="column span-8 last">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

    </div>

    <div class="rounded-cornersbottom" id="footer">
      &copy; 2005, Lorem ipsum dolor sit amet.
      <br />
      All trademarks and registered trademarks appearing on 
      this site are the property of their respective owners.
    </div>
    </div>

  </body>
</html>

Here is my CSS:

#wrap{
    position: relative;
    top: 100px;

    }

    body { 
  /* background-color: #b5a789;*/
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;
}

    p, ul, li, h1, h2, h3, h4 {
    margin: 0;
}

    h3 {
    margin: 0 0 20px 0;
    padding: 0 0 5px 0;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

    #header {
  background-color: #838383;
  width:            950px;
  height:           150px;
}

    #content{
 background:       #c8c8c8;
 font-size:        105%;
 padding: 20px 20px 20px 20px;
 margin: 0;
 width: 590px;

}

    #sidebar {
  float: right;
  background:       #c8c8c8;
  font-size:        105%;
  padding: 20px 20px 20px 20px;
  margin: 0;
  width: 260px;
}

    #footer {
  background-color: #838383;
  color:            #c8c8c8;
  text-align:       center;

  font-size:        90%;
  clear:            left;
}

    h1 {
  font-size:        120%;
  color:            #954b4b;
}

    h2 { 
    font-size: 110%; 
}

    .slogan { 
    color: #954b4b; 
}

    .beanheading {
  text-align:       center;
  line-height:      1.8em;
}

    a:link {
  color:            #b76666;
  text-decoration:  none;
  border-bottom:    thin dotted #b76666;
}
    a:visited {
  color:            #675c47;
  text-decoration:  none;
  border-bottom:    thin dotted #675c47;
}

    .rounded-corners {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;

    -khtml-border-radius: 20px;
}

    .rounded-cornersbottom {
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;

    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;

    -khtml-border-radius: 20px;
}
Solution

  • I think I figured out how to fix the problem, or rather, I figured out why it was messing up the way it was.

    Since I'm a bit rusty in HTML and CSS, I forgot that padding increases the size of the element. So, because I had blueprint set up to give the the entire layout 24 columns, I thought it would be a good idea to give the content div 15 columns, and the sidebar div 8. Thus, giving 1 column space between the content div and the side bar div.

    So when I added padding around the text, it made the divs bigger (at least to my understanding.

    So I fixed this by decreasing the sidebar from 8 columns to 7 columns. Giving the padding enough room to not jump down under the content div.

    I hope this is a good fix, if there is a more efficient/correct way of doing this, I'd love to hear.