Three DIVs, of which two have dynamic width

Question

What I'm trying to have is a header image located on top, with a different colored background on both sides, dynamically filling the rest of the page. The structure will look like this:

<div id="Header_Container"> <div id="Header_Left"></div> <div id="Header_Center"></div> <div id="Header_Right"></div> </div> 

Header_Center has 960px , and Header_Left and Header_Right should fill either side of the image to the edge of the page and change the width when changing the width of the page.

I cannot get CSS to work correctly.

Answer 1

You should fix this using padding and box model + position: relative - this can be done without changing the HTML

 <div id="Header_Container"> <div id="Header_Left"></div> <div id="Header_Right"></div> <div id="Header_Center"></div> </div> 

And CSS (e.g. 100px)

 #Header_Container{ overflow: hidden; height: 100px; } #Header_Container *{ box-sizing: border-box; height: 100%; } #Header_Left{ width: 50%; padding-right: 480px; } #Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% }; #Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; } 

Example here http://jsfiddle.net/ZAALB/2/ EDITED an invalid example

Answer 2

I assume that you want these 3 divs to fill each with different content, the outsides filled with fluid or multi-line. Otherwise, the answer can be much ¹⁾ simpler. I also assume that the center of the div determines the overall height of the header.

Given these two questions, you can think of several different scenarios, of which I will give four examples from which you can choose the best suitable solution.

HTML is just yours.

CSS looks like this:

 #Header_Container { width: 100%; position: relative; } #Header_Left { position: absolute; left: 0; right: 50%; margin-right: 480px; } #Header_Right { position: absolute; left: 50%; right: 0; margin-left: 480px; top: 0; } #Header_Center { width: 960px; position: relative; left: 50%; margin-left: -480px; } 

Now you can change the behavior of the left and right with a few additional styles:

  height: 100%; overflow: hidden; 

See demo script .

¹⁾ When the parties may be partially invisible outside the browser window (in case you align the content in the left div to the right and vice versa), I propose a solution to this demo , which does not require absolute positioning at all, so that any content under the heading is correctly cleaned under any circumstances.

Answer 3

If I understood that this might be a possible solution.

 ​#container { width: 100%; height: 150px; } #left { position: absolute; left: 0; width: 50%; height: 150px; background-color: #FF0000; } #right { position: absolute; right: 0; width: 50%; height: 150px; background-color: #0000FF; } #center { position: absolute; left: 50%; margin-left: -480px; width: 960px; height: 150px; background-color: #888888; }​ 

#left basically says that the element will be absolute and attached to the left side with a width of 50% . The same applies to #right for the right side only.

#center positions the element by absolutely pushing 50% left, and then with a negative width/2 limit, which in your case will be 480px to put it in the center.

The order of elements in HTML is important for this hack.

 <div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div>​ 

#center DIV should be the last element if you do not want to work with z-indexes.

Here's a fiddle to check it out.

Answer 4

HTML:

 <div id="Header_Container"> <div class="Header_Side" id="Header_Left"></div> <div class="Header_Side" id="Header_Right"></div> <div id="Header_Center"></div> </div> 

CSS

 #Header_Container { position: relative; width: 100%; } #Header_Container > div { height: 158px; /* height of the image */ } .Header_Side { position: absolute; width: 50%; } #Header_Left { left: 0; background-color: blue; } #Header_Right { left: 50%; background-color: green; } #Header_Center { position: relative; width: 158px; /* width of the image */ margin: 0 auto; background-image: url('...'); } 

Also see this example .

Answer 5

This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/

HTML

 <div id="header_background_container"> <div id="header_left"></div> <div id="header_right"></div> </div> <div id="header_content_container"> <div id="header_content"><p>Content goes here</p></div> </div> 

CSS

 #header_content_container { position:absolute; z-index:1; width: 100%; height: 100%; } #header_content { width: 960px; margin: 0 auto; background: red; height: 100%; } #header_left { background: white; width: 50%; height: 100%; position: absolute; z-index: 0; } #header_right { background: black; width: 50%; height: 100%; position: absolute; z-index: 0; }