Div expanding behind another div

Question

(previous problem fixed updating to new problem) The mainContent div now expands behind the carousel div I have between it and the footer.

CSS Style1:

body {
    height:100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #000305;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
}
.mainContent {
    height:100%;
    flex: 1;
    position: relative;
    background-color: #333;
    overflow: hidden;
    line-height: 25px;
}
.mainFooter {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 150px;
    width: 100%;
    float: left;
    padding-left: 0;
    background-color: #000;
    color: #CCC;
}

CSS Style 2:

.list_carousel {
    background-color: #222;
}

There are more css classes and ids for the carousel, but this is the only one that edits the div, so as you can see, it has no settings for height or position. When I did set the position to fixed, it shot down below the footer and there was no scroll wheel.

So now the mainContent div is expanding to the bottom on the browser and some things within the div are now hiding behind divs below the mainContent such as the carousel and even down behind the footer.

Do you have `height: 100%` on the HTML element? see: [Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Sep 15 '16 at 04:41
Possible duplicate of [Twitter Bootstrap 3 Sticky Footer](http://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer) — henry, Sep 15 '16 at 04:42
The search term you're looking for is "bootstrap sticky footer" - there are several SO questions about that already. Short answer is there's an official example at https://getbootstrap.com/examples/sticky-footer/ — henry, Sep 15 '16 at 04:44
There it is -_- I somehow deleted that. Thanks haha. I now have a new problem. on my index page, I have a div in between the mainContent and mainFooter divs. The mainContent div is now going behind the div in between. I will update the question. — Layne Mayo, Sep 15 '16 at 04:48
Also, no I don't want the sticky footer... I am not trying to make it stay on the screen. — Layne Mayo, Sep 15 '16 at 04:56
@LayneMayo please create a jsfiddle of your codes, so it gets easy to understand what you tried and what you want. — frnt, Sep 15 '16 at 05:10
@LayneMayo visit this website https://jsfiddle.net/ post your html code one-side, css code one-side then save and post link over-here. — frnt, Sep 15 '16 at 05:24
https://jsfiddle.net/f7pzqd80/1/#&togetherjs=dJhPFU6z4P @frnt — Layne Mayo, Sep 15 '16 at 05:32

score 1 · Accepted Answer · answered Sep 15 '16 at 06:18

try below css, may be you need this see Fiddle Demo

CSS:

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #000305;
  line-height: 1.429;
  margin: 0;
  padding: 0;
  text-align: left;
}

.mainContent {
  height: 100%;
  flex: 1;
  position: relative;
  background-color: #333;
  line-height: 25px;
}

.list_carousel {
  background-color: #222;
  position: relative;
}

.list_carousel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

.list_carousel li {
  margin: 10px;
  text-align: center;
  display: block;
  float: left;
}

.list_carousel.responsive {
  width: auto;
  margin-left: 0;
}

.mainFooter {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  height: 150px;
  width: 100%;
  float: left;
  padding-left: 0;
  background-color: #000;
  color: #CCC;
}

Me setting the overflow to hidden is what was making it act weird. I saw you remove it in the fiddle and tried it. Thank you for the help! — Layne Mayo, Sep 15 '16 at 06:27

Div expanding behind another div

1 Answers1