Home/ Questions/Q 8914945
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T04:51:19+00:00

I want this layout: +———–+————————+————–+ | | | TOP | | | | |

  • 0

I want this layout:

+-----------+------------------------+--------------+
|                                                   |
|                     TOP                           |
|                                                   |
|                                                   |
+-----------+------------------------+--------------+
|           |                        |              |
|           |                        |              |
|           |                        |              |
|     B     |       CONTENT          |       B      |
|           |                        |              |
|           |                        |              |
+-----------+                        |--------------+
|           |                        |              |
|           |                        |              |
|           |                        |              |
|     C     |                        |       D      |
|           |                        |              |
|           |                        |              |
|           |                        |              |
+-----------+------------------------+--------------+

The “TOP” and “B” have one background: image (color gradient from blue on top to white – for example – on bottom), “CONTENT” is main page (menu, entries, etc), “C” is the white color.

If “D” was white color too, then there would be no problem. But “D” is other color, for example red.

I must set this and I have to consider different monitors width, when “CONTENT” is fixed to 900px and center (margin: auto). “C” color must be on the left side of content and “D” on the right side. Page must be compatible with IE7,8,9 and other browsers.

How to do it?

UPDATE:

Ok, lets some example code:

<body>
    <div id="content">
        I don't know, maybe height is less maybe not...
        <div class="clear"></div>
    </div>
</body>

or: 

<body>
    <div class="wrapper">
        <div id="content">
            I don't know, maybe height is less maybe not...
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</body>

body {
    /* background image - height: 400px */
    backgroud: url('images/bg.jpg') repeat-x;
}

#content {
    backgorund: #0f0;
    margin: auto;
    width: 900px;
    margin-top: 150px;
}

.clear {
    clear: both;
}

.wrapper {
    width: 100%;
}

I want to get color white (for example) on the bottom left of the content and red (for example) on the bottom right. Bottom means, when the background body is ending, to the end of page. If I knew height of the content then I could insert a div with absolute (right: 0px; and width 50%.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the structure you’ll need, in a “just add code” format:

    Top: Full width single div.

    Bleft and C contained in a div (lets give this a class of “container” for now).

    CONTENT a single div with your 900px width.

    Bright and D will have the same structure as Bleft and C.

    Then create a new wrapper div starting from Bleft to D and id it as “main-container”.

    Then for the CSS, set #main-container as display:table, and for .container, #content set display:table-cell.

    This should get you started. Let me know how the layout workouts for you and if you need anything once you’ve got this structure set up.

    • 0