How to have 100% elements when there is a fixed width wrapper?

by 10 replies
12
Hello, if you put say a 1000px width wrapper around all of your code with margin 0 auto to center your design - is there then anyway to have your header or footer repeat-x 100% while still being inside of this wrapper code?

I ask because on a template I work with I have no access to modify the wrapper code that has a constraining width - but I would like 100% footer.

Thanks for any help!
#website design #100% #elements #fixed #width #wrapper
  • I believe it is a matter of css specificity. Try adding this code to your styles:

    .fullsize {
    width: 2000px !important;
    }

    Then apply the class "fullsize" to the container you want to be wider than the wrapper.
  • If you're wrapped inside a fixed width, and unless I'm mistaken, I don't believe it to be possible. The max you would be able to set it would be the 1000px. Why can't you modify the code?
    • [1] reply
    • The example above is for a div with a class of fullsize that increased the width of the div to 2000px in a body section with max-width of 1000px.
  • You can also play with

    .fullsize {
    position: absolute;
    left: 0;
    width: 100% !important;
    }

    You will increase the width of the section but you will run into other problems, I guess.
    • [2] replies
    • Most themes are of the layered nature there is a container or wrapper at the base, and then the header and footer are within that, same goes with a top section and footer wrappers etc.

      You can simply size the container / wrapper to 100%, and then size the internals elements accordingly SO you want the header and footer at 100% and then the body at 80%

      It just takes some playing around with the different elements and how they are stacked and play together.
      • [2] replies
    • Thanks, I tried both of your code samples in a test page - they come close but each has an issue; the code is below; "fullwidth" does make the footer 100% - but then the interior footer content aligns left, I need it aligned center. "fullwidth2" keeps the interior footer content centered - but then only repeats the background on the right side, not the left side - and it causes a horizontal scrolling bar which is a no go...

      HTML Code:
      <html>
<head>
<style type="text/css">
<!--
body {
margin: 0;
}
#wrapper {
	margin: 0 auto;
	width: 960px;
}
#maincontent {
	height: 400px;
	background-color: #396;
}
#footer {
	background-color:#000;
	background-repeat:repeat-x;
}
#footercontent {
	height: 116px;
	background-color:#F00;
}
.fullwidth {
position: absolute;
left: 0;
width: 100% !important;
}
.fullwidth2 {
width: 2000px !important;
}
.centerfooter {
	margin 0 auto;
	width:960px;
}

-->
</style>
</head>

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

<div id="footer" class="fullwidth">

	<div id="footercontent" class="centerfooter"></div>

</div>


</div>
</body>
</html>
      • [1] reply
  • you could always use a background and then repeat it
Join the discussion

Next Topics on Trending Feed

  • 12

    How to have 100% elements when there is a fixed width wrapper?

    Hello, if you put say a 1000px width wrapper around all of your code with margin 0 auto to center your design - is there then anyway to have your header or footer repeat-x 100% while still being inside of this wrapper code? I ask because on a template I work with I have no access to modify the wrapper code that has a constraining width - but I would like 100% footer.