Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Need help positioning a column

    I'm having to work with adding code to another site's existing formatting, which is making this awkward. They let you insert blocks of code into the head, into the body (beginning) and into the footer. You can't change the rest of the page. I'm trying to add a right-hand column and have it float nicely beside the center content, but so far the only way I've been able to get it close is by absolute positioning, which is wrecked if someone makes their browser window the wrong size. Maybe you can help me.

    It's the right-side column (the list of types of products) here: http://www.cafepress.com/opalshop

    Right now it's set to have a left position of 1000px. I'd like it to be fluid, though, and adjust to the size of the window.

    Right now my css is like this:

    #sidebar-2 {
    float: right;
    width: 150px;
    \width: 150px;
    w\idth: 150px;
    font-size: .8em;
    position: absolute;
    left:1000px;
    border: 1px solid #775736;
    }

    Everything else I've tried either makes the center content show up above or below the right column, rather than next to it. Help?

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Please try the first and/or second tutorial of my signature page.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, Frankie, I read those, but they still didn't help me figure out how to position my column. If you look at the page source of http://www.cafepress.com/opalshop you can see that I've added (in ALL CAPS for easier spotting) comments to indicate the beginning and ending of each of the editable areas on the page. I have no control over the rest of the page. Can someone look at it and help me get this column to actually float to the right of the main content? I'm driving myself crazy

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello OpalCat,
    Your #sidebar-2 is contained inside #content and absolutely positioned. (Since floats and positioning don't mix your float: right; is negated by the position: absolute

    To start with, you might want to re-think the 100% width on your table contained in #content. The way it is now is 100% width PLUS your 120px wide #sidebar-2.
    Change that table to 80% width and see how that looks for you.

    Whenever you have a 3 column layout like this, it's always nice NOT to specify a width for your main column, that allows the larger column to use all the room left to it by the sidebars. See this example.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't have control over that part of the html. See the comments where it says BEGIN EDITABLE FIELD "HEADER" and END EDITABLE FIELD "HEADER"--the section between those two comments is the only part I have access to. Given that, do you have any suggestions?


  •  

    Tags for this Thread

    Posting Permissions

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