Align Divs properly

Question

I need some serious CSS help with my current project. I've attached a screenshot of what I want my page to look like. THe problem I am having is positioning the divs on each other properly as well as having the width/height maintaining 100% of the page. I would like to do this without using Javascript. This is my HTML:

<body>
    <div class="wrapper">
       <div class="container_24">
            <div class="grid_16">
                <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
            </div>
       </div>
       <div class="container_16">
            <form id="form1" runat="server">
                <asp:ContentPlaceHolder ID="Body" runat="server">

                </asp:ContentPlaceHolder>
            </form>
       </div>
       <div class="container_24"></div>
        </div>
</body>

This is my CSS:

.wrapper{
  min-height: 100%;
  min-width: 100%;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;

    min-height: 100%;

  /* Set up proportionate scaling */
  height: auto;
  margin-top:0px;
  padding-top:0px;
    background-image:url(../images/Content_bkg.gif);
        box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 1px solid rgb(71, 89, 32);
    box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    position:relative;
    width:100%;
}

Image on what I want it to look like (spanning the entire browser window): enter image description here

Actual: enter image description here

I don't know of a good way to display full-height unless you want the bottom green bar to always be there. The bottom green bar should move down as you get some content. — Leeish, Mar 01 '13 at 23:19
.content-16 - does it have any content? Setting it to height:100% doesn't guarantee it stretches. Also, are you setting your html and body to width:100%; height:100%;? — Casey Dwayne, Mar 01 '13 at 23:19
If you want your content-16 to be able to get bigger I'd set `min-height` on it and not `height` anyway. It will be 100% of the height if it's parent element. — Leeish, Mar 01 '13 at 23:21
Too lazy to post an actual answer: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/ — cimmanon, Mar 02 '13 at 00:11
@WouterJ I've tried so many different things that I have lost track. Everyone seems to think that the min-height is the end all.. that doesn't work for this and produces the same results as shown above. I have created a fiddle project - http://jsfiddle.net/LMFL5/ — Yecats, Mar 02 '13 at 05:43
@cimmanon this does not work for me. Same issue as noted in Tom's answer below. — Yecats, Mar 02 '13 at 05:44
@Leeish I do want the footer and header bars to always exist. — Yecats, Mar 02 '13 at 06:04
"Doesn't work" is not a useful description of the problem. I'd like to see you try that at your mechanic next time. "What seems to be the problem?" "My car doesn't work". Their demo clearly works: http://pixelsvsbytes.com/examples/sticky-footers-the-flexible-way/simple.html — cimmanon, Mar 02 '13 at 12:35
If you want them to always appear, just set them to position fixed. Top div set `position: fixed; top: 0;` bottom div set `positionL: fixed; bottom: 0` — Leeish, Mar 02 '13 at 15:59
@cimmanon Your demo doesn't have the exact output as mine. My inner content div should only be 960px wide, not the entire page. The header/footer span the entire page. I apologize if I am not descriptive enough but I thought I demonstrated what I wanted in my images posted as well as the problem in my post above, and responses to answers. — Yecats, Mar 03 '13 at 00:01

Leeish · Accepted Answer · 2013-03-03T15:43:32.117

html,body {
    height: 100%;
}
.container_16 {
    min-height: 100%;
}

Maybe try that. Or make a fiddle so we can mess with your code.

EDIT

http://jsfiddle.net/LMFL5/4/ (The fiddle doesn't do it justice unless you have two monitors and span across both of them as the 960 is too small. Adjust the wrapper width to like 500 to see it in action in the fiddle. This way you could also easily set breakpoints for your wrapper and make a semi-responsive site. I don't do it this way anymore, I use the flex width 960 grid.

Here is the way I do what you are talking about a lot.

HTML

<body>
    <div class="container_24">
        <div class="wrapper">
            <div class="grid_16">
                <input type="text" value="Username" /><input type="text" value="Password" /><input type="button" value="Submit" /><span class="mainLink">Register</span>
            </div>
        </div>
   </div>
   <div class="container_16">
       <div class="wrapper">
           <form id="form1" runat="server">
            Adding some content
           </form>
       </div>
   </div>
   <div class="container_24 footer">
        <div class="wrapper">Footer</div>
   </div>
</body>

CSS

html, body {
    height:100%;
    margin: 0;
}

.wrapper{
  width: 960px;
  margin: 0 auto;      
}
.grid_16 {
    text-align: center;
}
.container_16 {
    width: 100%;
    height: 100%;
}
.container_16 .wrapper {
     background-image:url(../images/Content_bkg.gif);
     box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    height: 100%;
}
.container_24 {
    background-image: url(../images/headerFooter_bkg.gif);
    background-color: green;
    height: 60px;
    margin: 0px;
    padding: 0px;
    border: 1px solid rgb(71, 89, 32);
    box-shadow: 0px 0px 15px rgb(0,0,0);
    -webkit-box-shadow: 0px 0px 15px rgb(0,0,0);
    position:relative;
    width:100%;
}
.container_24.footer {
    bottom: 0;
    position: fixed;
    z-index: 3;
}

The key to what I did for your widths is make a common 960 wrapper that I include in every div. That wall all your content lives in the 960 space but you can have the divs span full screen. This site: http://960.gs/ has a CSS generator that can do exactly what you are trying to do and much of your code looks like it is from this, same class pattern. Here to can generate your required number of columns: http://grids.heroku.com/

Basically if you want a full screen width div, just wrap one of their .content divs and you are good to go.

This didn't fix it.. though per your recommendation I have created a fiddle: http://jsfiddle.net/LMFL5/ — Yecats, Mar 02 '13 at 04:59
http://jsfiddle.net/LMFL5/2/ You had some heights overridding things. This fixes some of it. You may need to tweak your shadows and stuff. — Leeish, Mar 02 '13 at 16:03
This looks a lot better but is not quite the exact output that I want. The header/footer are in the right spot and the content spans, but I need the content section to only be 960px wide, not the entire page like the header and footer. Thank you for the help, by the way! — Yecats, Mar 03 '13 at 00:04
The way I usually do that is make a wrapper class and put it inside each div for my content. So my divs can always span 100% if they need to, but the content stays in 160. I'll edit. I see you are using the 960grid. — Leeish, Mar 03 '13 at 15:29

score 0 · Answer 2 · answered Mar 01 '13 at 23:28

0

See here for 100% min-height layout

answered Mar 01 '13 at 23:28

Tom Jenkin

1,925
2
15
11

This doesn't work as I want my header/footer to span the entire page. It seems that if I change the width of container to be 100% and change the width of content to be 960px it does not register properly. (The content will span the entire the page.) – Yecats Mar 02 '13 at 05:42

snowp · Answer 3 · 2013-03-02T11:45:17.317

0

@Yecats may be this one help for you

 .wrapper
    {
      height: 100%;
      min-width: 100%;  
      /* Set up proportionate scaling */
      width: 100%;
      /* Set up positioning */
      position: relative;
      top: 0;
      left: 0;

    }

edited Mar 02 '13 at 11:45

answered Mar 02 '13 at 11:28

snowp

495
1
6
22

Align Divs properly

3 Answers3