0

I have a page that I want to auto center the content of with:

position: absolute 
left: 50%
margin-left: -1/2 of width.

This works but when I use position: absolute it's like my footer suddenly doesn't see the content and floats up. I tried using this sticky footer, but it does not work for me. Here is a link to the page without the sticky footer and auto center removed: http://cashforcarsanywhere.com/how-it-works/

Any help would be appreciated.

I have no experience with JavaScript or jQuery so please try to limit answers to CSS, HTML.

showdev
  • 28,454
  • 37
  • 55
  • 73
user2532639
  • 3
  • 1

3 Answers3

1

#footer on page bottom

Essencials:

<div id="footer">
   <p>This is some #footer content</p>
</div>


#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  padding: 20px 15px;
  background:#bada55;
}

#footer on page bottom with Centered Content

Essencials:

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>


#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  width: 600px;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  background:#cf5;
}

Example with page content

Essencials:

<div id="page">
  <p>This is some Centered #page content my 100px padding bottom will prevent the content to end up behing the #footer applying properly the vertical window scrollbars once I touch the very page bottom.</p>
</div>  

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>


#page{
  margin: 0 auto;
  width:600px;
  padding:20px 15px 100px;
  background:#eee; /* BG is just for example, avoid BG on this element, rather create an inner one*/
}

#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  width: 600px;
  background:#cf5;
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

Setting position:absolute will remove that element from the document flow. So, it will no longer push your footer down.

I had success with the CSS below.

Please note that you have several cascading definitions for div.span8. Be sure to remove all float and width settings. Actually, I just removed the entire span8 class from that div.

div.span8 {
  // remove all float and width settings.
  // (I just removed the entire class "span8" from this `div`.)
}


#howitworkscontent {
  position: relative;
  width: 800px;
  padding: 15px auto;
  margin: 0px auto;
  /*float: left;*/
}

Example: http://jsfiddle.net/5WFNW/

EDIT:

As mentioned by hustlerinc, and since the OP is trying to use bootstrap responsive, it would probably be better to use a bootstrap class instead of width:800px. However, as bootstrap's .span classes include float:left, you will need to also set float:none.

showdev
  • 28,454
  • 37
  • 55
  • 73
  • showdev, thank you so much. It worked beautifully. This will work on other pages as well? – user2532639 Jun 28 '13 at 17:08
  • Yes, if you use the same concept shown here. However, keep in mind that there might be a reason that div has a class of `span8`. I'm not very familiar with bootstrap, so make sure you know what you're changing. – showdev Jun 28 '13 at 17:11
-1

The reason for using bootstrap is that you dont need all that messy css, use it to your advantage.

Edit: I took a closer look in your code, this is your solution. Change <div class="span8"> into <div class="span8 offset2"> and it will be perfectly centered.

http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

justanotherhobbyist
  • 2,124
  • 4
  • 28
  • 38
  • 1
    This centers the text, but does not seem to center the `div` element. – showdev Jun 28 '13 at 17:02
  • Depends where you put it, it's about the hierarchy of the site. I didn't take too close of a look at his code but I suppose
    should do it and then the text inside other divs that dont inherit text-center.
     – justanotherhobbyist Jun 28 '13 at 17:04
  • We're talking about centering a `
    ` though, not the text inside the `
    `.
     – War10ck Jun 28 '13 at 17:04
  • It centers div's too, buttons any element within the text-center div. Anyway I edited my answer to fit his code. – justanotherhobbyist Jun 28 '13 at 17:08
  • 1
    But only `inline` elements. Unless you set `display:inline` on the target `div`, `text-align:center` on its parent will not center it. http://jsfiddle.net/JucP2/ – showdev Jun 28 '13 at 17:09
  • 1
    The `offset2` class does not center it either: `.offset2 { margin-left: 230px; }` – showdev Jun 28 '13 at 17:10
  • It would've if you didn't mess up bootstraps original code. Remove anything you did, add that class and it will work. Refer to the docs if you dont trust me. http://twitter.github.io/bootstrap/scaffolding.html#gridSystem – justanotherhobbyist Jun 28 '13 at 17:13
  • `offset2` relates to the grid system and offsetting columns, not centering. It might *look* more centered, but it just has a left margin. `Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.` – showdev Jun 28 '13 at 17:17
  • Which is exactly what the OP was asking for. My solution was 1 word to center his span8 on any device, any page width. The way bootstrap recommends. Going in and changing css isn't needed, with your solution it will look messed up on devices below 800px. – justanotherhobbyist Jun 28 '13 at 17:23
  • The OP may not be using bootstrap-responsive to its full potential. However, given the site the OP provided, `offset2` does not work: http://i.imgur.com/7RT6isc.jpg Also, see TrueLifeCoder's comment to this answer: http://stackoverflow.com/questions/9382970/how-to-center-a-box-thing-with-bootstrap#9419480 – showdev Jun 28 '13 at 17:32
  • True, to accommodate smaller devices, you could remove the `width:800px` and set a span class (`span8`) instead. But you still have to "unfloat" the `span8`. http://stackoverflow.com/questions/9554724/how-do-i-center-a-bootstrap-div-with-a-spanx-class#9554800 – showdev Jun 28 '13 at 17:41
  • Only if you're going to go against bootstraps own recommendations. They tell you to put an offset, not margin: 0px auto. span8 means so much more than just the width, read about their grid and use of columns before commenting on it, I use it in all my projects. Anyway I dropped it, so should you. – justanotherhobbyist Jun 28 '13 at 21:44