CODEWITHSUNDEEP
html
GaidenFocus
GaidenFocus

Reputation: 99

Puting <div>s next to each other

I have been searching for a way to put divs next to eachother and found one that "worked" but there is an issue

float: left;

it worked! but it also popped them out of the parent div and it looks silly. the background of the parent div no longer cares about them.

How can I put two divs, side by side, while in another div?

Upvotes: 0

Views: 78

Answers (3)

Guffa
Guffa

Reputation: 700592

Floating elements doesn't normally affect the size of their parent. You can change this by changing the overflow style of the parent.

Example:

.parent { background: red; overflow: hidden; }
.child { float: left; margin: 5px; background: yellow; }
<div class="parent">
  <div class="child">child 1</div>
  <div class="child">child 2</div>
  <div class="child">child 3</div>
</div>

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46795

To prevent floated blocks from "popping out" of the parent container, you need to trigger a block-formatting context, which you can do by specifying:

overflow: auto

for the parent container.

.wrap {
  border: 1px dotted gray;
  background-color: beige;
  overflow: auto;
}
.wrap div {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px dotted blue;
  margin: 10px;
}
<div class="wrap">
  <div>One</div>
  <div>Two</div>
</div>

Upvotes: 0

Yoann Augen
Yoann Augen

Reputation: 2036

Remove your float and try :

display: inline-block;

Upvotes: 1

Related Questions