WEB really simple css question

Discussion in 'OT Technology' started by Sooner25, Sep 6, 2007.

  1. Sooner25

    Sooner25 New Member

    Joined:
    Sep 5, 2007
    Messages:
    36
    Likes Received:
    0

    I know html pretty well and I'm trying to teach myself css, so why isn't the green block next to the red one?
     
  2. Ractoon

    Ractoon Shibumi in progress...

    Joined:
    Apr 30, 2001
    Messages:
    256
    Likes Received:
    0
    Just eyeballing it here's what I see:

    Since #right is width: 100%; it's taking up the width of the container, in this case the body. So when it tries to get on the same line as your #left <div> it doesn't have enough space so goes below it.

    If you remove width: 100%; there's two ways to get #right to get in the position you want:

    1) Set "margin-left: 160px;" or however much space you want in #right. This will scoot #right over 160px (giving you a 10px gutter between #left and #right). Thus for this option your #right looks like:

    #right
    {
    background-color: green;
    margin-left: 160px;
    }

    Put in some content or it won't show up btw.

    2) Set "float: left;" for #right. That looks like:

    #right
    {
    background-color: green;
    float: left;
    }

    If you were using this for an actual layout rather than an exercise there are better ways to do it, but this should get the red next to the green at least and give you something to mess with. You shouldn't really need to explicitly say "width: 100%" for <div> since it will fill whatever container you put it in as well.
     
  3. Sooner25

    Sooner25 New Member

    Joined:
    Sep 5, 2007
    Messages:
    36
    Likes Received:
    0
    you lost me
     
  4. Sooner25

    Sooner25 New Member

    Joined:
    Sep 5, 2007
    Messages:
    36
    Likes Received:
    0
    what are the better ways you're refering to?
     
  5. Ractoon

    Ractoon Shibumi in progress...

    Joined:
    Apr 30, 2001
    Messages:
    256
    Likes Received:
    0
    Someting like http://www.alistapart.com/articles/negativemargins/

    Just something that has been tested more extensively for browser support and such. Also gives a bit of flexibility if you wanted a liquid layout (content grows or shrinks to fit the window if user resizes), or to have the columns look a little better if they're differing sizes.
     
  6. Sooner25

    Sooner25 New Member

    Joined:
    Sep 5, 2007
    Messages:
    36
    Likes Received:
    0
    Code:
    <html>
    <head>
    <style type=text/css>
    
    #top 
    {
    background-color: blue;
    width: 100%;
    height: 150px
    }
    
    #left
    {
    background-color: red;
    width: 150px;
    height: 100%;
    float: left;
    }
    
    #right 
    {
    background-color: green;
    margin-left: 160px;
    width: 100%;
    height: 100%;
    float: left;
    }
    
    </style>
    <title>Practice</title>
    </head>
    <body>
    <div id=top>
     
    </div>
    <div id=left>
     
    </div>
    <div id=right>
    
    </div>
    </body>
    </html>
    

    i tried what ractoon said and it still didn't work. and if i wanted it to fill the rest of the screen no matter what resolution someone was on what other option would i have other than 100%?
     
  7. Ractoon

    Ractoon Shibumi in progress...

    Joined:
    Apr 30, 2001
    Messages:
    256
    Likes Received:
    0
    Well for mine, 1 and 2 were separate options. So your #right should look like:

    Code:
    #right 
    {
    background-color: green;
    margin-left: 160px;
    }
    OR

    Code:
    #right 
    {
    background-color: green;
    float: left;
    }
    The thing about width 100%; is that the <div> will automatically do it. Try this though for your file:

    Code:
    <html>
    <head>
    <style type=text/css>
    
    #top 
    {
    background-color: blue;
    width: 100%;
    height: 150px
    }
    
    #left
    {
    background-color: red;
    width: 150px;
    height: 100%;
    float: left;
    }
    
    #right 
    {
    background-color: green;
    margin-left: 160px;
    }
    
    </style>
    <title>Practice</title>
    </head>
    <body>
    <div id=top>
     This stuff should appear on the TOP!!!
    </div>
    <div id=left>
     This stuff should appear on the LEFT!!!
    </div>
    <div id=right>
    This stuff should appear on the RIGHT!!!!
    </div>
    </body>
    </html>
     
  8. sparq

    sparq New Member

    Joined:
    Dec 3, 2004
    Messages:
    13,183
    Likes Received:
    0
    Location:
    Syracuse
    position
     
  9. c.a

    c.a New Member

    Joined:
    Jan 24, 2006
    Messages:
    1,117
    Likes Received:
    0
    couldn't you just get rid of the "right" div and make the body background green w/ 0 margins? :dunno:
     

Share This Page