Three Columns Div question

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • thesti
    New Member
    • Nov 2007
    • 144
    #1

    Three Columns Div question

    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.
    Tags: None
    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206
      #2
      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?

        Comment

        • thesti
          New Member
          • Nov 2007
          • 144
          #3
          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.

            Comment

            • JKing
              Recognized Expert Top Contributor
              • Jun 2007
              • 1206
              #4
              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.

                Comment

                • thesti
                  New Member
                  • Nov 2007
                  • 144
                  #5
                  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

                    Comment

                    • hellodipak
                      New Member
                      • Jun 2010
                      • 26
                      #6
                      all you need to do is -
                      <div id="headerConta iner" style="backgrou nd-image:yourHeade rbgImage;">
                      <div id="header" style="margin:0 auto; width:900px;">
                      your header content, that includes navigation too
                      </div>
                      </div>

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

                      <div id="footerConta iner" style="backgrou nd-image:yourFoote rbgImage;">
                      <div id="header" style="margin:0 auto; width:900px;">
                      your footer content
                      </div>
                      </div>

                      regard, Dipak.

                        Comment

                        • thesti
                          New Member
                          • Nov 2007
                          • 144
                          #7
                          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.

                            Comment

                            • JKing
                              Recognized Expert Top Contributor
                              • Jun 2007
                              • 1206
                              #8
                              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

                              Code:
                              <!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>

                                Comment

                                Previous template Next
                                Working...