using CSS in a blog (movable type)

Dev Shed Forums Sponsor:

February 24th, 2003, 12:41 PM

cliffyman

Contributing User

Join Date: May 2001

Location: Washington DC, USA

Posts: 156

Time spent in forums: 26 m 7 sec
Reputation Power: 13

using CSS in a blog (movable type)

I'm using the Movable Type publishing software for my blog and am realizing it uses CSS 2 very heavily in its formatting. I have a lot of experience with CSS 1 but I still haven't broken out of using tables to control the layout of sites I build. I was wondering if someone could give me a hand with a question about what I'd like to accomplish...

What I'd like to do is be able to put one of the div's (the one storing all the blog content) on the left hand side, filling about 70% of the screen, and then put all the div's after it (links, search, syndicate, etc etc) on the right hand side occupying the other 30%. I could do it easily with a table but I'd like to avoid spoiling the very pure CSS implementation that's in place.

Is this possible to do with just CSS, or is this the kind of situation that CSS wasn't meant for? Thanks a lot!

February 24th, 2003, 01:07 PM

jkd

CF sMod

Join Date: Jul 2000

Location: Maine, USA (a.k.a. Boonies)

Posts: 242

Time spent in forums: 6 m 43 sec
Reputation Power: 13

float: left;

The thing you want on the left, and

float: right;

The thing you want on the right.

__________________
Jason Contact Me
Super moderator @ CodingForums

February 24th, 2003, 01:25 PM

cliffyman

Contributing User

Join Date: May 2001

Location: Washington DC, USA

Posts: 156

Time spent in forums: 26 m 7 sec
Reputation Power: 13

That works okay as far as putting them on the right and left side, but it seems that most of the time the item on the right sits beneath the item on the left. In the document, the left item comes before the right item, and I use the styles like so:

Code:

#content
{
float: left;
width: 70%;
}

#links
{
float: right;
width: 30%;
}

Any pointers? The document and stylesheet are at:

http://www.cliffmeyers.com/blog/
http://www.cliffmeyers.com/blog/styles-site.css

February 24th, 2003, 01:36 PM

Rob B

Junior Member

Join Date: Feb 2003

Location: Ottawa

Posts: 23

Time spent in forums: < 1 sec
Reputation Power: 0

The reason that's happening (just looked at this topic myself) is that the browsers implment the div boxes differently. For layouts each box has a margin, a border, and padding. These all get added on to the width so if you have a box that's say 600px; and you say add on a border of 1px you now have a box that's 602 px.

There's lots of websites out there on the topic here's one with a layout similar to what you're doing:
http://www.digital-web.com/tutorial...l_2002-06.shtml

Hope this helps

February 24th, 2003, 01:48 PM

cliffyman

Contributing User

Join Date: May 2001

Location: Washington DC, USA

Posts: 156

Time spent in forums: 26 m 7 sec
Reputation Power: 13

Actually, you're right, it is a bit of caveat with the way the browsers render the page. It looks like when you assign relative sizes (in percentages) that the browser allocates that to the element, and afterwards looks at the borders, margins and padding. If there's too much padding or whatnot, they won't fit in the allocated space and you'll get a new line sort of situation.

I changed the percentages to add up to 95% for some breathing room and it seems to be working now. Thanks for the help!

using CSS in a blog (movable type)

Developer Shed Advertisers and Affiliates