CODEWITHSUNDEEP
htmlcss
Mažas
Mažas

Reputation: 397

push div to left-bottom

I need div "3" to be pushed to left bottom like in second picture. Problem is, "1" div is larger than "3", so my current setting float: left doesn't work.

I have div which contains all my numbered divs (blue rectangle). Code for "1" div:

.mainItemPhoto {
    min-width: 474px;
    float: left;
    padding-right: 25px;
}

"2":

div.directionInformation {
    padding-left: 34px;
}

"3":

.additionalItemPhotos {
    float: left;
}

"4":

div.aditionalInfo {
    float: left;
    width: 475px;
    font-size: 15px;
}

enter image description here

enter image description here

Upvotes: 0

Views: 77

Answers (2)

Angelique
Angelique

Reputation: 936

You can keep the divs #2 and #3 together by wrapping them in a container and applying the float to that. This also allows you to remove the float attributes from your other elements. I've also included a media query to stuff those divs under the photo for devices under 800px, but you can adapt that based on the actual width of the content in #2 and #3.

You'll have to view the example below as full page to see the result.

/*  Just for the example; you likely won't need this in your stylesheet */

div {
  background: grey;
  padding: 50px;
}

.mainItemPhoto {
  min-height: 474px;
}

.infoWrapper {
  padding: 0;
}

.infoWrapper > div {
  background: red;
}


/* Actual layout styles */

* {
  box-sizing: border-box;
}

.mainItemPhoto,
.infoWrapper,
.additionalInfo {
  margin: 10px;
}

.mainItemPhoto {
  min-width: 474px;
}

.additionalInfo {
  width: 475px;
}

@media only screen and (max-width:799px) {
  .mainItemPhoto,
  .infoWrapper,
  .additionalInfo {
    margin-right: auto;
    margin-left: auto;
  }
  .infoWrapper {
    width: 475px;
  }
}

@media only screen and (min-width:800px) {
  .mainItemPhoto {
    display: inline-block;
  }
  .infoWrapper {
    float: right;
  }
}
<div class="mainItemPhoto">#1</div>
<div class="infoWrapper">
  <div class="directionInformation">#2</div>
  <div class="additionalItemPhotos">#3</div>
</div>
<div class="additionalInfo">#4</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67758

Add "clear" to your CSS rule for the third element:

.additionalItemPhotos {
    float: left;
    clear: both;
}

This will push the third element below any others that are before it in the code.

Upvotes: 1

Related Questions