CSS help-me-doooo (simple question I'm too stupid to solve)

Mimi · **Joined:** 27th Mar, 2008 **Posts:** 26049

Hello peepols,

So... I have an issue. Here is a partial screenshot of my blog:

The text area contained within the red boundary is currently 400px, but I would like it wider. Ideally I'd like it expanded to something like the green area. The 'content' part of the style sheet reads:

Code:

/* Content */
#content {
   width: 545px;
   padding-left: 59px;
   _padding-left: 40px;
   float: left;
}
.post {
   width: 500px;
   margin: 12px 0;
   position: relative;
}
.post h2 {
   font-size: 1.6em;
   font-family: Arial, Helvetica, sans-serif;
   padding-bottom: 5px;
   border-bottom: 1px solid #2c1200;
}
.post h2 a {
   color: #525252;
}
.postmetadata {
   padding: 2px 8px 0 0;
   display: block;
   text-align: right;
   color: #485561;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.1em;
}
.postmetadata a {
   text-decoration: underline;
}
.postmetadata a:hover {
   text-decoration: none;
}
.post_date {
   width: 59px;
   height: 44px;
   position: absolute;
   top: 0;
   left: -61px;
   color: #fff;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 30px;
   text-align: center;
   font-weight: bold;
   font-size: 1.2em;
   background: url(images/date_bg.jpg) no-repeat;
}
.entry {
   width: 400px;
   overflow: hidden;
   padding: 0px 0 0 10px;
   font-size: 1.2em;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   line-height: 20px;
}

If I change the part that reads:

Code:

.entry {
   width: 400px;
   overflow: hidden;
   padding: 0px 0 0 10px;
   font-size: 1.2em;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   line-height: 20px;
}

so that the width reads 500px, it occupies the area within the dark purple dotted box in the top picture. I'd really like the post to sit under where the tab for the date is, rather than to the side of it, but I just can't figure out how to do this!
Here is the full CSS text:

Attachment:

mimi_css.rtf

(I had to post it as a rtf to get the file uploader to accept it). Is there anyone who can see what I cannot? It is the only thing I have had issue with.

devilman · **Posted:** Mon Aug 31, 2009 14:13

Personally, I'd probably try a negative margin (margin-left:-whateverpx) but there's probably a far more elegant way.

GazChap · **Posted:** Mon Aug 31, 2009 14:29

Code:

/* Content */
#content {
   width: 545px;
   padding-left: 59px;
   _padding-left: 40px;
   float: left;
}

Try taking out the two padding-left lines.

devilman · **Posted:** Mon Aug 31, 2009 14:31

Oh yeah.. I didn't even spot those.

Mimi · **Joined:** 27th Mar, 2008 **Posts:** 26049

Thanks guys

I forgot to mention that I tried that Gaz, but it served to shift the date and its background image over to the sidebar like so:

I tried Devilman's solution and that worked well. I didn't know you could give margins negative values, but then I know very little. It meant that the bottom of the date graphic overlapped the post slightly but I added a small top margin and now it is all much better. I'll have to play with he values a bit until I can find a nice balance of text area size and position, but it is exactly what i was looking to do, so thankyou both x

GazChap · **Posted:** Mon Aug 31, 2009 18:47

If I remember rightly, technically speaking negative margins are not valid CSS.

But if it works, it works!

One thing you might want to try is taking out the paddings, as I suggested above, and then changing the left: -61px; in post-date to left: 0px;

Be Excellent To Each Other

CSS help-me-doooo (simple question I'm too stupid to solve)
beautiful helper needed

Who is online

Be Excellent To Each Other

CSS help-me-doooo (simple question I'm too stupid to solve) beautiful helper needed

Who is online

CSS help-me-doooo (simple question I'm too stupid to solve)
beautiful helper needed