CODEWITHSUNDEEP
cssposition
big_smile
big_smile

Reputation: 1523

CSS: Making an element fill the browser width while keeping other elements centered with a defined width

I'm trying to create the following layout in CSS:

enter image description here

It is a typical web layout where all the content is in a wrapper DIV that has a defined width and is centered on the page.

However, the purple background is a CSS gradient and needs to fill the entire width of the browser (and not just the width of the content wrapper). Furthermore, different pages will have different lines of headline/intro text (e.g. some pages might have 3 lines, others just 1) and so the purple background needs to match the height of this content.

I am also using a CMS which places all the content in a wrapper that has a width and is centered with margin:auto.

How can I achieve the layout?

At first I though I could use position:absolute on the headline/intro div. This works great. Except the rest of the content gets hidden behind the headline/intro div. See an example here: http://jsfiddle.net/5BkX6/1/

I then tried using position:relative on the headline/intro div and then using negative left values together with padding to stretch the background of the DIV while keeping the content centered. See an example here: http://jsfiddle.net/4DZYr/1/

This method works great, except it creates a horizontal scroll bar. I know I can apply overflow-x:hidden to the main wrapper DIV to hide the scroll bar, but I would prefer not to have it in the first place.

How can I achieve my goal. I do not want to use jquery to get the height of the headline/intro DIV.

Upvotes: 1

Views: 141

Answers (1)

Max Doumit
Max Doumit

Reputation: 1115

This should give you the layout you want ^^ Here is the Html

<body>
<div class="header">
<div class="contentheader">This is the header</div>
</div>
<div class="container">
   <div class="content">
      <div class="left"></div>
      <div class="right"></div>
   </div>
</div>
</body>

And here is the style

.header{
width : 100%;
background : #0033aa;
height : 100px;
}
.contentheader{
width : 1000px;
margin : 0 auto;
}
.container{width : 100%;
}
.content{
width : 1000px;
margin : 0 auto;
}
.left {
width : 300px;
display : inline-block;
height : 200px;
background : #3300aa;}
.right{
width : 700px;
display : inline-block;
height : 200px;
background : #aa0033;}

Upvotes: 1

Related Questions