CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Honey
Honey

Reputation: 207

Footer div gets under another div

I have a div with some text and another one that I'm filling it with a list of photos and a footer div. The footer div should be below photos div but it gets under it. This is my code:

div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  float: left;
  width: 280px;
}

div.gallery:hover {
  border: 2px solid #777;
}

div.gallery img {
  width: 80%;
  height: auto;
  margin: auto;
}

div.desc {
  padding: 15px;
  text-align: left;
}
<div>
  <p>Software Engineer
</div>

<div id="test">
  <div id="comments">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>
  </div>
  <div id="footer" style="background:blue;height:100px;width:100%">
    <div style="background:blue;height:200px;width:100%"></div>
  </div>

Ans here is a screenshot of it

enter image description here

How can i fix it?

Upvotes: 2

Views: 137

Answers (6)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Issue may be because of the floats. Try using Clearfix

Try adding this class to comments. (Modified Some HTML)

Give this a try.

HTML

<div>
  <p>Software Engineer
</div>

<div id="test"> 
  <div id="comments" class="clearfix">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>        
  </div>
</div>

<div id="footer" style="background:blue;width:100%">
  <div style="background:blue;width:100%"> footer div here</div>
</div>

CSS

.clearfix::after {
  content: "";
  display: table;
  width: 100%;
  clear: both;
}


div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  float: left;
  width: 280px;
}

div.gallery:hover {
  border: 2px solid #777;
}

div.gallery img {
  width: 80%;
  height: auto;
  margin: auto;
}

div.desc {
  padding: 15px;
  text-align: left;
}

.clearfix::after {
  content: "";
  width: 100%;
  display: table;
  clear: both;
}
<div>
  <p>Software Engineer
</div>

<div id="test">
  <div id="comments" class="clearfix">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>
  </div>
</div>

<div id="footer" style="background:blue;width:100%">
  <div style="background:blue;width:100%"> footer div here</div>
</div>

Link for reference

Hope this helps…

Upvotes: 2

dale landry
dale landry

Reputation: 8610

UPDATED Your floats are not cleared. Use @Chandras example or you can add a CSS ID #footer { clear:both; } and call on it in your footer div as you have in your example already. <div id=footer">.

Bonus, add your style="width:100%; height:200px; background:blue; color:#FFF;" line to your css file and remove the style attr from your div footer tag all together.

In your example snipit, I used a class with clear in your footers ID. Check it:

div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  float: left;
  width: 280px;
}

div.gallery:hover {
  border: 2px solid #777;
}

div.gallery img {
  width: 80%;
  height: auto;
  margin: auto;
}

div.desc {
  padding: 15px;
  text-align: left;
}
   
#footer {
    clear:both;
    width:100%; 
    height:200px; 
    background:blue; 
    color:#FFF;
    
}
<div>
  <p>Software Engineer
</div>

<div id="test">
  <div id="comments">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>
  </div>
  
  <div id="footer">Footer
  </div>

FYI Bootstrap V3 soon to release v4. CDN: Bootstrap CDN link BS V3 Grid System: specific grid layout system

Bootstrap is an open source plugin that uses a standardized set of css and js rules already coded for you.

Among the many other awesome css and js additions, float your html tags using a standardized set of classes known as cols. These are used with media short cuts: xs, sm, md, lg, then add a division of 12, so you get something like. <div class="gallery col-xs-12 col-sm-12 col-md-4 col-lg-4"> (col-md-4 means you are using up 4 of the 12 increments for a single div. You have 3 gallery divs, so 3 X 4 = 12 = col-md-4) These validate for different screen size media. Here is the layout from bootstrap grid per media:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

//  Extra small devices Phones (<768px) = .col-xs
//  Small devices Tablets (≥768px)      = .col-sm
//  Medium devices Desktops (≥992px)    = .col-md
//  Large devices Desktops (≥1200px)    = .col-lg

So by looking at my example, class="col-xs-12" on phones we would get one div that would be width=100%;. Where as "col-md-4" on lap tops and desk tops with resolution of any media larger than 992px we would get the divs stacked side by side at width=33.33%;

Best to just read up on bootstrap as it is a bit to get into in one of these forums. It is actually very simple to add and use if you read up on it and how it works.

There is also Bootply -> Bootstrap online editor, there are some amazing tools there to help you get started using bootstrap!

Hope this helps...

Upvotes: 1

vj.madamala7
vj.madamala7

Reputation: 109

#footer {
    float:left;
    width:100%;
}

Upvotes: 0

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Remember that float are removed from normal document flow. You should clear floats when using them.

But I suggest you to rewrite your float code using flexbox. In this case you can remove floats because they will be ignores. Demo:

#comments {
  /* specify element as flex-container */
  /* its children will be treated as flex items */
  display: flex;
  /* allow moving elements to next line */
  flex-wrap: wrap;
}

div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  width: 280px;
}

div.gallery:hover {
  border: 2px solid #777;
}

div.gallery img {
  width: 80%;
  height: auto;
  margin: auto;
}

div.desc {
  padding: 15px;
  text-align: left;
}
<div>
  <p>Software Engineer
</div>

<div id="test">
  <div id="comments">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>
  </div>
  <div id="footer" style="background:blue;height:100px;width:100%">
    <div style="background:blue;heoght:200px;width:100%"></div>
  </div>
</div>

Upvotes: 1

Amr Elgarhy
Amr Elgarhy

Reputation: 68922

Your issue that your comments container height is not correct, it is is not considering the inner nodes size.

So give comments overflow:hidden; or a fixed height or minheight

Upvotes: 0

Kasunjith Bimal
Kasunjith Bimal

Reputation: 188

You can replace This Code.

<div style="background:blue;height:200px;width:100%"></div>

Upvotes: 0

Related Questions