12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

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

by adiaphoros
10 replies
  • WEB DESIGN
    • |
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!
#100% #elements #fixed #width #wrapper
  • Profile picture of the author harkon
    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.
    Signature
    WordPress Development Services
    {{ DiscussionBoard.errors[9262892].message }}
  • Profile picture of the author HA-Dave
    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?
    {{ DiscussionBoard.errors[9263409].message }}
    • Profile picture of the author harkon
      Originally Posted by HA-Dave View Post

      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?
      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.
      Signature
      WordPress Development Services
      {{ DiscussionBoard.errors[9263443].message }}
  • Profile picture of the author harkon
    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.
    Signature
    WordPress Development Services
    {{ DiscussionBoard.errors[9263526].message }}
    • Profile picture of the author savidge4
      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.
      Signature
      Success is an ACT not an idea
      {{ DiscussionBoard.errors[9263710].message }}
      • Profile picture of the author harkon
        Originally Posted by savidge4 View Post

        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%
        He is well aware of that. Your comments in this forum are to a large extent useless.
        Signature
        WordPress Development Services
        {{ DiscussionBoard.errors[9263862].message }}
      • Profile picture of the author adiaphoros
        Originally Posted by savidge4 View Post

        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%
        Thanks, I thought about this, but its a lot of work and was hesitant to not screw up the main structure of the site; I do have access to overwrite existing CSS including the wrapper code; although, its "overwrite" meaning I can add my own style sheet below the main one - not edit the main stylesheet directly; so if there is a pixel value I need to add a pixel value - i cant remove the pixel value and put 100% I dont think; I need to check on this.

        If I set the wrapper to 100%, then there are like 40 rows inside it that I would have to add something to center them like margin: 0 auto; - IF i did this, would you consider this a "stable" website, is that valid code? I thought this was the main purpose of the wrapper in the first place, but I am not a expert developer by any means.
        {{ DiscussionBoard.errors[9269511].message }}
    • Profile picture of the author adiaphoros
      Originally Posted by harkon View Post

      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.
      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>
      {{ DiscussionBoard.errors[9269516].message }}
      • Profile picture of the author harkon
        Originally Posted by adiaphoros View Post

        Thanks, I tried both of your code samples in a test page - they come close but each has an issue
        Yes. I told you you would run into other issues. My point was to show you that you could increase the width of a section inside a fixed content wrapper.
        The normal solution around this problem is to take the element with the 100% width out of the wrapper.
        Signature
        WordPress Development Services
        {{ DiscussionBoard.errors[9269699].message }}
  • Profile picture of the author 89camaro
    you could always use a background and then repeat it
    Signature

    Professional Designer with 8 years experience. I enjoy what I do! See for yourself. http://michaeltinnin.deviantart.com/

    {{ DiscussionBoard.errors[9268408].message }}

Trending Topics