#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Washington DC, USA
    Posts
    156
    Rep Power
    14

    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!
  2. #2
  3. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    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
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Washington DC, USA
    Posts
    156
    Rep Power
    14
    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
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Ottawa
    Posts
    23
    Rep 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/tutorials..._2002-06.shtml

    Hope this helps
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Washington DC, USA
    Posts
    156
    Rep Power
    14
    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!

IMN logo majestic logo threadwatch logo seochat tools logo