CODEWITHSUNDEEP
css
Jeremy
Jeremy

Reputation: 925

How can I put white space at the bottom of my website, so the floating div never overlaps

I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in.

I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it.

I've tried adding:

margin-bottom: 50px;
padding-bottom: 50px;

to the div containing the top page content, but it doesn't work.

Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/

Upvotes: 5

Views: 4290

Answers (4)

rlemon
rlemon

Reputation: 17667

http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, having no idea what your layout looks like (I am not going to assume the demonstration is yours... unless you revise and tell me it is) i'll show you how I would do this

HTML

<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
    <div class="inner-content"> <!-- content inner, where your content goes! -->
    content
    </div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>

CSS

​html,body,.container {
 height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}

.content {
 height: 100%; // see above... i need to cascade down.
 background-color: green;
}
.content-inner {
 padding-bottom: 100px; // offset for the footer.
}
.footer { 
 width: 100%;
 position: absolute; // stick me to the bottom.
 bottom: 0;
 height: 100px;
 background-color: red;   
}

enjoy! ​

Upvotes: 1

SpYk3HH
SpYk3HH

Reputation: 22580

#left, #right { 
    margin-bottom: 90px; 
}

or

#top_section > div { 
    margin-bottom: 90px; 
}

It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work

Upvotes: 3

Yogu
Yogu

Reputation: 9455

Simply add the following rule:

#top_section {
    overflow: hidden;
    padding-bottom: 90px;
}

This will make #top_section be as big as the floating content inside it.

Upvotes: 2

Ian
Ian

Reputation: 151

You need to use fixed position in CSS to achieve this.

HTML:

<div id="top-section">
     Insert content here...
</div>
<div id="bottom-nav">
     <div id="content">
       Bottom content...
     </div>
</div>

CSS:

#bottom-nav {
  bottom: 0;
  position: fixed;
  width: 100%;
}

#content {
  margin: 0 auto;
  width: 960px;
}

Upvotes: 0

Related Questions