Three Columns Div question

144 New Member

hello,

I have a header. Right now, it is only a div wrapped in another div, and placed at the center of the screen using the css margin:0 auto.

I want to make it into 3 divs. Left, Center (the header) and Right. The reason is that, there's a line at the header image that should run from the left side to the right side of the screen. Right now, there's only empty space at the left and the right side of the header image.

The question is, how do i place the header (center div) to be centered? The header div has a fixed layout, it's always 900px width. I think the margin:0 auto won't work anymore. How should i set the width of the left and right divs?

Thank you.

Jun 8 '10 #1

Subscribe Reply

2077

JKing

1,206

Recognized Expert Top Contributor

Hi,

I am having trouble understanding the layout you are looking to achieve.

Do you have an example or an image that would accurately convey the layout you are looking for?

Jun 17 '10 #2

thesti

144

New Member

Hello JKing, thanks for the reply.

Here is my current layout

and here is what i want to achieve

The difference are in the header, menu and the footer part. Notice the line that continues to the left and the right of the screen from the content (center).

I wonder how to set the width so that the center part will always be centered on the screen no matter what the resolution is.

Thank you.

Jun 20 '10 #3

JKing

1,206

Recognized Expert Top Contributor

My suggestion is to wrap your header and footer in separate container divs. Apply the background to the container div. Then center the header and footer divs as you have done before.

Jun 23 '10 #4

thesti

144

New Member

Great Idea JKing.

never thought of it before. Thank you.

Since the end of the left and the end of the right footer image has different color, I'm thinking of creating 2 absolute-positioned divs with z-index lower than the center, or can a single div has two different background-image? one for the left and one for the right.

Thank you

Jun 24 '10 #5

hellodipak

New Member

all you need to do is -
<div id="headerContainer" style="background-image:yourHeaderbgImage;">
<div id="header" style="margin:0 auto; width:900px;">
your header content, that includes navigation too
</div>
</div>

<div id="bodyContainer" style="margin:0 auto; width:900px;">
Your Body Content
</div>

<div id="footerContainer" style="background-image:yourFooterbgImage;">
<div id="header" style="margin:0 auto; width:900px;">
your footer content
</div>
</div>

regard, Dipak.

Jun 24 '10 #6

thesti

144

New Member

Oh, i forget. The background image of the left hand side and the right hand side is different.

Notice that the blue line of the navigation is larger at the left hand side and it becomes smaller near the end of the right hand side.

That's why i couldn't make a single div, center it, and apply a background-image with repeat-x attribute.

Jun 24 '10 #7

JKing

1,206

Recognized Expert Top Contributor

Hello again,

After playing around for a while I have come up with this example for you. It uses some pretty background colors but I think it illustrates the layout you are trying to get. Appears properly in IE8 and FF

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>    

        <style type="text/css">

        *{padding:0;margin:0;}

        #leftHeaderBg {background-color:red;z-index:1;position:absolute;height:100px;width:100%}

        #rightHeaderBg {background-color:blue;float:right;width:50%;z-index:1;position:absolute;height:100px;}

        #leftFooterBg {background-color:red;z-index:1;position:absolute;height:30px;width:100%;bottom:0;}

        #rightFooterBg {background-color:blue;float:right;width:50%;z-index:1;position:absolute;height:30px;bottom:0;}

        #container {width:100%;z-index:100;position:absolute;text-align:center;}

        #content {background-color:green;width:900px;margin:0 auto;}

        #header{height:100px;width:900px;background-color:#666;margin:0 auto;}

        #footerWrap {position:absolute;bottom:0;z-index:5;width:100%;text-align:center;}

        #footer{width:900px;background-color:yellow;height:30px;margin:0 auto;position:relative;}

        </style>

    </head>

    <body style="">

        <div id="leftHeaderBg">

            <div id="rightHeaderBg">

                </div>

            </div>

        <div>

        <div id="container">

            <div id="header">

                <h1>Header</h1>

            </div>
 
            <div id="content">

                <h1>Content</h1>

            </div>

        </div>

        </div>

        <div id="footerWrap">

            <div id="footer">

                <h1 style="font-size:15px">Footer</h1>

            </div>

        </div>

        <div id="leftFooterBg">
 
            <div id="rightFooterBg">

            </div>

        </div>

    </body>

</html>

Jun 24 '10 #8

by: anon | last post by:

I am trting to simulate the case available in an excel worksheet where the first three columns are frozen and the rest scroll left and right against this. For example: I have a grid which lists...

Three Columns Div question

Similar topics