SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3-columns, center fixed, sides fluid and equal?

    How?

    I see oodles of guides and prefabbed layouts for the more common center-fluid/sides-fixed version of the 3-column layout, but can't find one for the combination I need.

    Thanks in advance for any ideas/help/comments/pointers/css/urls/…

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Bill,

    I did this some time ago as an exercise but I haven't re-visited it lately so I hope its of some use.

    http://www.pmob.co.uk/temp/3colfluidsides1.htm

    I'm not sure how it will stand up in real use but your welcome to use it. I haven't seen anyone else do this either (in css)

    Paul

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was hoping there might be a simpelr, claener way of doing it.
    Your method seems to work in Safari, but MSIE5 barfs on it. and I don't have the energy left to find a tweak to satisfy MSIE/Mac.


    The actual application is for this visual effect.
    I was hoping to find a non-stacking solution, which is where this specific layout request came from.


    As you can see, the left column ("rectoverso") is only used to visually support the central, horizontally-centered main container 'page'.

    In the end it was simpler to lay down a 50% wide div tucked into the left and using it to hold a tiling background.
    I then horizontally centered the main container div using the dead center/negative margin method ( *spit* *spit* ).

    I'd hoped to avoid using position: absolute; on the container div, but had to for the sake of z-indexing (FF/Moz not being a big fan of negative z-index values)


    As mentioned, I'd hoped that there would be a more regular solution, as I wanted to avoid using a stacking solution and I've never been a big fan of the negative margin kludge, but it seems to produce the most consistent results as well as being the lightest in terms of the amount of markup/css.

    Perhaps I should stop writing off absolute, stacking solutions.


    Thx all the same for the attempt, Paul.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Bill,

    What you have seems to work quite well and is pretty compact so its probably not worth messing with it

    The only drawback I can see is that using the dead centre/negative margin technique is that the layout slides all the way off the left side as the screen is resized smaller. You could avoid that by using the margin-left:auto and margin-right:auto centering and then the container, header and footer could all be statically positioned (with position:relative for stacking order etc.)

    But I'm well aware that you may have already tried that method (and many others) anyway, so I'm probably wasting your time

    Paul

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    …using the margin-left:auto and margin-right:auto centering and then the container, header and footer could all be statically positioned (with position:relative for stacking order etc.)

    But I'm well aware that you may have already tried that method (and many others) anyway, so I'm probably wasting your time

    Paul
    Nono…

    I could have sworn that I'd tried that, but clearly not as it does solve all the problems.
    God knows what I was doing wrong/differently.
    My head clearly wasn't on straight yesterday, so thanks for the 'coffee call'.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •