SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Connecticut, USA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Faux Columns - Do not know how to impl on my design

    I have a design and I wish to have both content columns grow (in height) evenly. I understand the basic concept of faux columns but, now sure how to implement them specifically for my my page.

    Here is a link to the test page I'm working:

    http://www.rustbug.com/test/test.html

    Any guideance would be greatly appreciated.

    thanks!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    That's an interesting design, I can see why you were having trouble finding a solution to faux columns

    Add a wrapper around the two columns to apply the background image to, this would mean that the footer will be below these columns not 'inset' underneath the content column.
    Code:
    <div id="wrapper">
      <div class="faux">
        <div id="contentcolumn">
        </div>
        <div id="helpcolumm">
        </div>
      </div>
    </div>
    Code:
    .faux { background: white url(faux.gif) repeat-y top  left}
    You may need to drag this whole wrapper left rather that using relative positioning like you currently are on the content column. You should use negative margins when moving an element out of position - it doesn't leave a footprint where the element used to be so it's a little easier to maintain. No ghost elements..

    Hope it helps

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Connecticut, USA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Take a look.

    Thanks for responding. I didn't get you response until after a bit of grinding but, I think you solution is what I ended up with.

    I wrapped the two columns in a wrapper and gave it the background and left the col transparent. Boy!...working the border, margin and other widths is a b!tch! I had to play with it pixel by pixel.

    Next: Trying to make it all work in Firefox....Any suggestions???

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by swaddock View Post
    Next: Trying to make it all work in Firefox....Any suggestions???
    Start with Firefox
    IE is so bug ridden that if you make it work in that browser first - it's too hard to go back the other way..

    Code to a standards compliant browser first, Opera, Firefox, Safari..
    Then add fixes for IE

    Firefox should do exactly what you tell it to - a couple of exceptions..


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
  •