CSS Guru's Please help

Discussion in 'CSS' started by Nxiel, Aug 25, 2008.

  1. #1
    Ok bascially my problem is that I have a two column layout. The layout requires for some background images to float to either left, right, top, or bottom of the layout.

    To accomplish this, what I did was create 4 parent DIV containers. Each div describing the position of where the background should be. So for instance the html would look like this:

    <div id="background1>
    <div id="background2">
    <div id="background3">
    <div id="background4">
    </div>
    </div>
    </div>
    </div>

    NO bascially inside this, I have a two column layout. ONe could be described as sidebar and the other as main content. These two containers also have backgrounds inside them. To describe this, look the code:

    <div id="sidebar" style="background info here">
    </div>
    <div id="content" style="background info here">
    </div>

    Now you might be asking why he is giving much importance to the backgrounds. Well they are not really that important but I need these backgrounds, or rather the container (div) to extend to the whole height of the browser.

    In my CSS file, I have specified the height of html/body to be 100%. Additionally I've tried everything such as height:auto, min-height, height and what not to have these containers extend to the whole page. This is very vital because as previously mentioned in the beginning code, I have 4 background containers. They need to extend to the corners of the browser page.

    Its really not a problem for me if I have alot of content because that will automatically extend to the height.
     
    Nxiel, Aug 25, 2008 IP
  2. DREAM SIZE

    DREAM SIZE Active Member

    Messages:
    103
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    <div id="background1>
    <div id="background2">
    <div id="background3">
    <div id="background4">
    </div>
    </div>
    </div>
    </div>

    =

    <div id="background1"><div id="background2><div id="background3><div id="background4></div></div></div></div>

    ---

    This is not how you should be writing your code. Putting parent containers inside of other parent containers is gonna result in a whacky ass layout.

    Also, have you made sure there is margin: 0 and padding :0?
     
    DREAM SIZE, Aug 25, 2008 IP
  3. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That was a lot of text for me to read, and I am not sure If I understand what you are trying to accomplish. However, this link may be of some use to you,


    http://www.alistapart.com/articles/fauxcolumns/
    What are you trying to say here, they are both the same?

    What? That is perfectly valid syntax.
     
    nicangeli, Aug 25, 2008 IP
  4. DREAM SIZE

    DREAM SIZE Active Member

    Messages:
    103
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    That may be so, but for what I THINK he is trying to achieve, he shouldn't do it that way. It's just gonna make more work for him, but then again...I'm not really sure what he is trying to do lol.
     
    DREAM SIZE, Aug 25, 2008 IP