2

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Justin
  • 31
  • 4

3 Answers3

0

You could try setting the z-index of the element you want to be on top. z-index goes from -100 to +100 so you've got a lot of space to fit elements.

Kinz
  • 310
  • 1
  • 2
  • 14
  • Only the `y` dimension is meant by "under". There is no overlap. – calebds Mar 10 '12 at 02:04
  • z-index is not limited from -100 to +100. http://stackoverflow.com/a/491105/870729 – random_user_name Mar 10 '12 at 02:24
  • Ahh. Sorry. My HTML/CSS isn't *fresh*. I haven't used HTML, nor CSS, in about a month. I'll try to think of an answer in the meanwhile, I guess. Thanks for the comments, though. Learned something new ^_^ – Kinz Mar 10 '12 at 02:27
  • Doesn't seem to work. After deleting the width from the side bar and adding the z-index to 99, it still jumps down to the bottom because of (I'm assuming here) the padding in the side bar. >: – Justin Mar 10 '12 at 02:57
  • Your answer is in a blockquote - where is the source? – BoltClock Apr 09 '12 at 17:27
  • Z-index is an obvious CSS. By the way, I wouldn't suggest commenting on accepted topics. It's not good practice.. – Kinz Apr 13 '12 at 23:01
0

I have no idea about Blueprint.

However, I did the following and it seems to work like how I think you want it

  1. make both the sidebar and the content float:left
  2. take the sidebar out of the content div and place it on its own
  3. remove an extra closing </div>
  4. change the widths of the sidebar and content, down 10px for each (you may need to fiddle with this more.)
  5. use clear:both on the footer

Example: http://jsfiddle.net/5q8Xm/3/embedded/result/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • J don't have the side bar div inside the content div, or atleast I didn't intend for it to be in there. – Justin Mar 10 '12 at 12:23
0

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.

Justin
  • 31
  • 4