Sidebar alignment problems

• 

  steveevans · Member · Feb 15, 2009 at 10:09 pm

  • Copy link
  • Add topic to favorites

  I’m toying with sandbox’s css, and have written my own css. But for some reason my sidebars are pushed below the main content window, and the colors are off. It’s for http://bycommonconsent.wordpress.com/. Here’s the css so far, I’m just previewing it for now:

  a,visited {
  color:#8D0000;
  text-decoration:none;
  }

  a img {
  border:none;
  }

  a:hover {
  text-decoration:underline;
  }

  acronym,abbr {
  cursor:help;
  border-bottom:1px dotted #CCCCCC;
  }

  blockquote {
  border-left:3px solid #AFA8A8;
  margin-left:1.5em;
  padding-left:5px;
  }

  body {
  background:#A1A998;
  color:#000000;
  font-family:Arial, Helvetica, Sans-Serif;
  margin:0;
  padding:0;
  }

  div#header {
  background:#9EA3A6 url(‘http://bycommonconsent.files.wordpress.com/2009/02/bcc2.jpg’) no-repeat center;
  height:92px;
  border:solid 1px #868686;
  margin:10px 10px 0;
  padding:0;
  }

  div#header h1#blog-title {
  display:none;
  }

  div#header #blog-description {
  display:none;
  }

  h2.entry-title {
  border-bottom:solid 1px #AFA8A8;
  font-family:’Trebuchet MS’, Verdana, sans-serif;
  font-size:1em;
  padding:0 0 2px 3px;
  }

  h2.entry-title a {
  text-decoration:none;
  }

  .entry-date {
  color:#808080;
  font-weight:normal;
  font-style:italic;
  }

  .entry-meta {
  float:right;
  }

  div#container {
  float:left;
  width:100%;
  }

  div#content {
  background:#FFFFFF;
  border:solid 1px #868686;
  text-align:justify;
  font-size:.80em;
  line-height:1.4em;
  color:#171717;
  overflow:hidden;
  margin:10px 225px 0;
  padding:25px 20px 40px;
  }

  div#primary {
  float:left;
  margin:0 0 0 10px;
  }

  div#secondary {
  float:right;
  margin:0 10px 0 0;
  }

  div#footer {
  clear:left;
  width:100%;
  }

  h3.comment-header {
  border-bottom:solid 1px #AFA8A8;
  font-size:1em;
  }

  ol.commentlist {
  margin:10px 0 10px 20px;
  padding:0;
  }

  ol.commentlist li {
  border-bottom:1px dotted #AFA8A8;
  margin:10px 20px 10px 0;
  padding:0;
  }

  div.sidebar {
  overflow:hidden;
  width:195px;
  background:#E6E8DF;
  border:solid 1px #868686;
  font-size:.70em;
  text-align:left;
  list-style-type:none;
  list-style-image:none;
  font-weight:normal;
  line-height:1.1em;
  padding:2px 5px;
  }

  any advice?

  The blog I need help with is: (visible only to logged in users)

• 

  aw1923 · Member · Feb 15, 2009 at 10:51 pm

  • Copy link

  did you solve your problem, cause in my browser the sidebars aren’t below the main content and the colors aren’t off.

• 

  steveevans · Member · Feb 16, 2009 at 12:25 am

  • Copy link

  aw1923, try now.

  one of the sidebars doesn’t show at all in IE.

• 

  aw1923 · Member · Feb 16, 2009 at 1:42 am

  • Copy link

  sorry its probably because Im using firefox from experience with trying to design for IE, I recommend using the % or em unit for text size rather then the px unit also try decreasing your margins and padding. Kind of do a trial and error thing.