February 24th, 2003, 12:41 PM
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
The thing you want on the left, and
The thing you want on the right.
February 24th, 2003, 01:25 PM
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:
Any pointers? The document and stylesheet are at:
February 24th, 2003, 01:36 PM
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:
Hope this helps
February 24th, 2003, 01:48 PM
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!