CODEWITHSUNDEEP
htmlcss
fred
fred

Reputation: 485

floating divs inside parent with no fixed width

I have a set of divs that vary in size depending on an image inside it. Inside each div I would like two more divs, one is floated left and the other is floated right, like so: enter image description here

I sort of accomplished it this way ... html:

<div class="image-wrap">
  <a href="/shop/{{  link  }}"><img src="{{ img }}"></a>
  <div class="lookbook-title"><h5 >{{ title }}</h5></div>
  <div class="item-buy">{{ theme:partial src="_buynow" }}</div>
</div>

and css:

div.image-wrap {
    max-height: 1000px;
    max-width: 100%;
    border: 0;
    display: inline-block;
    height: auto;
    box-sizing: border-box;
    }

.lookbook-title {
     position: relative;
     top: -36px;
     float: left;
     padding-left: 10px;
     padding-right: 10px;
     color: #f7f7f7;
     }

.item-buy {
     position: relative;
     top: -56px;
     float: right;
     padding-right: 20px;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
     fill: #f7f7f7;
    }

The reason I say "sort of" is because it initially was working just fine, but now the floated divs are appearing on above and outside their parent divs. What is interesting is that if I inspect the problem with dev tools and uncheck and recheck the "float" on either div both go back to where I want them to go...

Upvotes: 1

Views: 282

Answers (2)

Dylan P
Dylan P

Reputation: 29

You should use position: absolute; for your 'floating' elements instead of float.

You'll need to add position: relative; to the parent wrap element - this will tell the children to respect the bounds of this element instead of floating somewhere outside of it. Then you can add position: absolute; to each of the children that you want to float and use top, bottom, left, right to control where the box is positioned. Experiment with different values to get the hang of it.

div.image-wrap {
  height: 300px;
  width: 400px;
  position: relative;
  border: 1px solid red;
}

.lookbook-title,
.item-buy {
  background: white;
  position: absolute;
  bottom: 10px;
  height: 100px;
  width: 100px;
}

.lookbook-title {
  border: 1px solid lime;
  left: 10px;
}

.item-buy {
  border: 1px solid blue;
  right: 10px;
}
<div class="image-wrap">
  <a href="/shop/"><img src="http://www.placehold.it/400x300.jpg"></a>
  <div class="lookbook-title"><h5>Div 1</h5></div>
  <div class="item-buy">Div 2</div>
</div>

Upvotes: 2

Alex
Alex

Reputation: 357

You need to clear your floats. Here is a interesting article that explains it in detail: http://css-tricks.com/snippets/css/clear-fix/

Hope this helps.

Upvotes: 2

Related Questions