Citra45Abadi Citra45Abadi - 6 months ago 6
HTML Question

need to place 5 divs side by side within footer

hi I need to place 5 DIVs within footer side by side, the 4 DIVs are already side by side but the 5th one just goes down.

I tried float : left, display :inline-block and even increased the width of parent DIV (footer) but the 5th one stayed below

here's the code :

CSS

#footer {
width:1240px;
padding:0px;
margin:0px auto;
background-image:url(../images/botm.jpg);
background-repeat:repeat;
background-position:center top;
}

.Aboutus {
float:left;
width:180px;
background-image:url(../images/footer.jpg);
background-position:right;
background-repeat:no-repeat;
text-align: left;
margin-left: 15px;
padding-top: 30px;
padding-right: 10px;
padding-left: 10px;
}

.ourblog {
float:left;
width:245px;
min-height:246px;
background-image:url(../images/footer.jpg);
background-position:right;
background-repeat:no-repeat;
padding-top: 30px;
padding-right: 10px;
padding-left: 10px;
}

.joinnews {
float:left;
width:190px;
min-height:246px;
background-image:url(../images/footer.jpg);
background-position:right;
background-repeat:no-repeat;
padding-top: 30px;
padding-right: 20px;
padding-left: 20px;
}

.contactus {
float:left;
width:200px;
min-height:246px;
color:#fff;
padding-top: 30px;
padding-left: 20px;
}

.Histats {
float : left;
width:50px;
min-height:1px;
color:#fff;
padding-top: 30px;
padding-left: 20px;
}


HTML

<div id="footer">
<div class="aboutus">
..code </div>
<div class="ourblog">
..code </div>
<div class="joinnews">
..code </div>
<div class="contactus">
..code </div>
<div class="Histats">
..code </div>

</div>

Answer

You can use display:flex. Check below snippet, this might help to get started.

#footer {
  display: flex;
  width: 1240px;
  padding: 0px;
  margin: 0px auto;
  background-image: url(../images/botm.jpg);
  background-repeat: repeat;
  background-position: center top;
}
.aboutus {
  width: 180px;
  background-image: url(../images/footer.jpg);
  background-position: right;
  background-repeat: no-repeat;
  text-align: left;
  margin-left: 15px;
  padding-top: 30px;
  padding-right: 10px;
  padding-left: 10px;
}
.ourblog {
  width: 245px;
  min-height: 246px;
  background-image: url(../images/footer.jpg);
  background-position: right;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-right: 10px;
  padding-left: 10px;
}
.joinnews {
  width: 190px;
  min-height: 246px;
  background-image: url(../images/footer.jpg);
  background-position: right;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-right: 20px;
  padding-left: 20px;
}
.contactus {
  width: 200px;
  min-height: 246px;
  padding-top: 30px;
  padding-left: 20px;
}
.histats {
  width: 50px;
  min-height: 1px;
  padding-top: 30px;
  padding-left: 20px;
}
<div id="footer">
  <div class="aboutus">
    ..aboutus
  </div>
  <div class="ourblog">
    ..ourblog
  </div>
  <div class="joinnews">
    ..joinnews
  </div>
  <div class="contactus">
    ..contactus
  </div>
  <div class="histats">
    ..histats
  </div>

</div>

Comments