Clever Geek Handbook

How do I display HTML elements that span the width of the page within width-constrained elements?

I'm working on a design that requires the main body of the design to have a fixed pixel width of 940 pixels, with the top and bottom borders extending beyond that border.

This is the simplest image that shows the desired effect:

Example of desired effect

Suppose some HTML is like this:

<!-- This is the Big Black width restricted box -->
<div class="enclosingBox">
    <div class="topnav">
        Exclusives
        Shop
        The Brand
        Press
        Vault
    </div>

    <div>
        <p>This is some stuff in the middle</p>
        <p>Some Other Stuff in the middle</p>
    </div>

    <div class="bottomnav">
        SHOE PIC 1
        SHOE PIC 2
        SHOE PIC 3
        SHOE PIC 4
    </div>
</div>

The top nav can be absolute position, but how is the add-on for bottomnav supposed to work?

+3


source to share


4 answers


You are thinking about it wrong. The best way to get the layout you're thinking about, if I understand you correctly, is to design your page as horizontal "segments" rather than trying to create an unnatural overlap.



<div style="width:800px;margin-left:auto;margin-right:auto;">
 ... all the top stuff, 100% wide and smaller
</div>

<div style="width:100%;">
<div style="width:800px;margin-left:auto;margin-right:auto;">
... your nav stuff
</div>
</div>

<div style="width:800px;margin-left:auto;margin-right:auto;">
... you're body ...
</div>

<div style="width:100%;">
<div style="width:800px;margin-left:auto;margin-right:auto;">
... bottom nav stuff
</div>
</div>

<div style="width:800px;margin-left:auto;margin-right:auto;">
... all your feets are belong to div
</div>
+2


source


Something like this seems pretty close.

http://jsfiddle.net/Fq32a/2/



html, body { width: 100%; position: relative; }

.topnav {
    position: absolute; 
    top: 100px; 
    height: 75px;
    left: 0px; 
    right: 0px;
    border: 1px dotted gray;
    text-align: center;
}

.bottomnav {
    position: absolute; 
    bottom: 20px; 
    height: 50px;
    left: 0px; 
    right: 0px;
    border: 1px dotted gray;
    text-align: center;
}
+2


source


Like this?

<div id="navigation">
   this is the navigation with 100% width.
</div>
<div id="width940">
  this is the container with 940px width
</div>

<!-- the css -->
#navigation {
  width:100%;
  position:absolute;
  top:50px;
  height:32px;
}
#width940 {
  width:940px;
  margin:0 auto;
}
0


source


you might want to look at the over flow property. you can find documentation on w3. however the answers obtained using absolute positioning are good. it just gets pretty freaky when dealing with older browsers, so you'll have to approach the problem on a trial and error basis. I'm not a css guru, but I know a few things. absolute positioning should work in theory, however I had problems with both the mentioned method and the absolute positioning method, especially when it was contained.

0


source






More articles:


All Articles