Home/ Questions/Q 8735403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T10:02:57+00:00

I’m having some trouble figuring out how to do this. I want to have

  • 0

I’m having some trouble figuring out how to do this. I want to have a wrapper so my site is centered, but one of the header elements needs to stretch all the way to the right edge of the page, but without expanding the width of the page and adding scrollbars.

See here: http://i49.tinypic.com/6rkaxc.jpg (new poster so can’t add image)

The blue outline represents the centered wrapper, and the orange box is the header div that I’m trying to get to fit to the right side of the page. I’ve got it to work using 100% width but it creates a horizontal page scroll since it’s making it the same width as it’s parent. I want it to expand for users that have higher resolutions so it always fits snug to the right side. I hope this makes sense.

my code looks something like…

<body>
<div id="wrapper">
   <div id="header">
   </div>

   <div id="left">
   </div>

   <div id="right">
   </div>
</div>
</body>

CSS:

div#wrapper {
 margin: 0 auto;
 width: 1020px;
 position: relative;
}

div#header {
 height: 150px;
 position: absolute;
 left: 510px;
 width: 100%;
}

div#left {
 width: 510px;
 float: left;
}

div#right {
 width: 100%;
 float: left;
}

I’m pretty new to this stuff so if you notice any errors here or bad practices please point them out! Thanks for the help! 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since you want your content to be fixed width, a strategy would be to have containers for both left and right contents. This allows you to use width: 100% for the header which will extend to the end without scroll bars. You then make the header relative to the right container. Here is a jsfiddle you can play with.

    Note I made the widths smaller so it would fit in my jsfiddle window.

    HTML:

    <body>
    <div id="wrapper">
       <div id="leftContainer">
           <div id="left">
               This is left
           </div>
       </div>
       <div id="rightContainer">              
           <div id="header">
              This is a header
           </div>   
           <div id="right">
              This is right
           </div>        
       </div>
   </div>
</body>          ​

    CSS:

    div#wrapper {
 text-align: center;
 width: 100%;
 position: relative;
 white-space: nowrap;    
 overflow-x: scroll;  
}

div#header {
 z-index: 1000;
 height: 150px;
 position: absolute;
 left: 0;
 width: 100%;
 background: green;    
}

div#leftContainer {
 float: left;
 width: 50%;
 height: 500px;
 display: inline-block; 
}

div#left {
 float: right;
 width: 260px;
 height: 300px;
 background-color: purple;
}

div#rightContainer {
 position: relative;
 float: right;
 width: 50%;
 height: 500px;    
 display: inline-block;  
}

div#right {
 width: 260px;
 height: 300px;
 background-color: yellow;
}
    • 0