SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist vhogarth's Avatar
    Join Date
    Nov 2003
    Location
    Taxachussets
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    aligning a DIV to the right without using margin settings

    HI, i'm in the process of jumping ship from tables to css and i've got things shaping up the way i like, but one thing is nagging me. I have a 4 column layout consisting of a top banner, left nav bar, center content display, right column. I've go everything lineing up nice with the margin attributes, but to right align the right colum i'm using something this: margin: margin: 40px 0px 0px 803px;

    I realized i was trying to figure out how far i wanted it to the right with my window maximized, so when i resized my window smaller the scroll bar showed up. Basically i want it to have the liquidity of staying to the right regardless of the size.

    Also, my center DIV that holds my content how can i make it expand 100% to fit in between the left and right columns?

    Last but not least. in IE, i noticed my banner div leaving some white space below my image that i have for my banner. I have padding set to 0px, I don tknow what else to do. It shows up perfectly in firefox... Any help with these knks would help. Thanks.

  2. #2
    SitePoint Zealot physt's Avatar
    Join Date
    Jul 2004
    Location
    Schenectady, NY
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First.. Start your code with * {padding: 0px; margin: 0px;} .. This will default every element to no padding or margin.. That should get rid of your white space...

    You need to use positioning to layout your design it seems.. Just using margins won't work.. And it definitely won't work the same in every browser and every res..

    To have a right sidebar you would doa style like this..

    Code:
    div#rightbar{position: absolute; right: 0px; width: 200px;}
    This will make a sidebar 200 pixels, and attached to the right side, no matter what res..

    You would also need to set definite widths on 2 of the bars in order to have the middle column be fluid..

    For the fluid layout you would do a style like this..

    Code:
    div#midcolum{position: absolute; left: 400px; margin-right: 200px;}
    This would make the layout start at 400 pixels from the left side and end at 200 pixels from the right side.. Since you use absolute positioning this would seperate the content from the flow of the page, which can be a bad thing.. But I think it's the only way to do exactly what you want..

    Heres a page that shows a different way to go about this..

    http://glish.com/css/8.asp


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •