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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS and Color in Negative Space

    Is is just me or is there something seriously wrong with layout in CSS. I have two columns side by side. One is longer than the other. So under the shorter column im left with white space because unlike tables the columns are not attached. So.... to fill in the white space i tried adding a color to the background of the main container div. that didn't work because apparently the container div does not stretch with the two columns nested inside it... unlike nested tables. i can try adding another div to that white space under the shorted column.... BUT....i would need to set the height to this new div. i tried this out and set the height to 100% so it would stretch to meet the end of the longer column.... but that didnt work which is understandable as the container div doesnt seem to have any height. AHHHHHHHHHHHHHHHHHHHHHH. what gives with CSS layout. do i need to set explicit heights for everything so my columns line up at the bottom ??? how does that acomodate dynamic content??
    i searched around on google and this seem to be an issue with other designers.

    Hope someone knows what im talking about. Kat

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hi kattie,
    you're on the right track by putting a color in the background div - that technique is called Faux Columns. Google that and you'll see a lot of examples.
    If the color still doesn't go all the way down then you need to clear your floats.

    Have a look at http://www.positioniseverything.net/easyclearing.html to see how to do that.

    If you need more help, post your code and someone will be glad to show you how to do it.

    Congratulations on making the effort to move away from tables!!!
    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

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No its likely you are using Firefox and you have at least one column floated therefore the containing element is collapsing because it thinks there is no content. If you are unsure what I'm talking about then post a link to your page or post your css and your html. Link is prefered.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Jul 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ahh im so stupid. i use clearing divs all the time but i didnt know that was part of their function. everything looks good now so thank you very much.

    yes im starting the really enjoy the hands on approach of css. apart from all the other benefits you also really get to know your code since GUI programs like dreamweaver dont work well with CSS. to use css for layout you really have to use your imagination and visualise what you want... then translate this into boxes. you end up with a deeper understanding of how you site is build. i hope GUI programs take their time in catching up.
    i have some friend that still use tables and its very had to explain to them why css is easier even without a development GUI. anyway... what better GUI than a refreshed browser ;0)


  •  

    Posting Permissions

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