How Would I Do This?

Discussion in 'HTML & Website Design' started by BlueEew, Jul 9, 2008.

0
  1. #1
    In xHTML, and CSS. How would I do this:

    [​IMG]

    Basically the left grey one is just a background. Then the white one is where the content goes. The next red one is the menu, and the last grey one is the right side background?

    I want it so the grey, grey, and red patchs are a fixed width. However the white expands to fill the screen.

    Can anybody help me please?

    Thanks,
    BlueEew.
     
    BlueEew, Jul 9, 2008 IP
  2. priyakochin

    priyakochin Banned

    Messages:
    4,740
    Likes Received:
    138
    Best Answers:
    0
    Trophy Points:
    0
    #2
    this need three divs, first div with grey color and second with red and last with white.
    do padding for the white and red divs.
     
    priyakochin, Jul 9, 2008 IP
  3. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You wont need a <div> for the background (grey) colour, that can be applied to the body.

    The white area would be a <div> as would the red one, something like, for the html...

    
<div id="content">
<h1> Content </h1>
</div>
<div id="right">
<h2> Right</h2>
</div>
    Code (markup):

    CSS,

    
body
{
background-color: #333333;
}
#content 
{
width: x;
float: left;
}
#right
{
float: left;
width: x;
}
    Code (markup):

    To make the red column expand to the height you want you will have to look into faix column techniques. www.alistapart.com/articles/fauxcolumns/ Here is one link...
     
    nicangeli, Jul 9, 2008 IP
  4. BlueEew

    BlueEew Well-Known Member

    Messages:
    2,434
    Likes Received:
    79
    Best Answers:
    1
    Trophy Points:
    150
    #4
    I will try with what you have provided. :)
     
    BlueEew, Jul 9, 2008 IP
  5. blurredfringe

    blurredfringe Member

    Messages:
    77
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #5
    For me, I will define the gray as bg color for the body, then define a container that will contain image that expands vertically- this will be your faux column.

    body {
    text-align: left;
    color: #333; /* this will be the gray background */
    }

    #main_container {
    margin: 0 auto;
    width: 720px;
    min-height: 600px
    important!
    height: 600px;
    background: url("bgimg.gif") repeat-y;
    }

    #column_left {
    text-align: left;
    float: left;
    width: 60%;
    }

    #column_right {
    float: right;
    width: 30%;
    }



    html:

    <body>
    <div id="main_container>
    <div id="column_left"></div>
    <div id="column_right"></div>
    </div>
    </body>


    just create a gif image with 720px width 1px height with 60% white and 30%red on the right, this will be your bgimg.gif.
     
    blurredfringe, Jul 9, 2008 IP