containing box size doesn't change when inside element float

Question

My container box does not have set height value. And I've got an element inside.

It's natural that the size of container stretch to the content (the element inside), but when I set it to float it does not, It just floats out of the container. Is there a way to set the float that the element still fit to the container, but just go say, to the right side?

Thanks for an answer.

.container {
}
.element {
 float: right;
}

#1st rule - Show us your code, or get your question downvoted — Alon Eitan, Jul 01 '16 at 09:42
Set the `overflow` to something else than the default, like `overflow: hidden`, this forces the element to wrap around it's children — BillyNate, Jul 01 '16 at 09:44
@AlonEitan "Questions without a clear problem statement are not useful to other readers". I think this one is pretty clear since it already has two useful answers. +1 — JasonK, Jul 01 '16 at 09:47
set the parent div's css to e.g `.parentDiv:after{content: " "; display: block;height: 0; clear: both;} — Abbr, Jul 01 '16 at 09:47
@JasonK I don't agree. You should not assume or guess how the HTML/CSS is constructed. The OP should post it in their question (Also since SO is here for future references, without context in the question body, it won't help other users with similar issue) — Alon Eitan, Jul 01 '16 at 09:53
@linearspin It's just about asking as clear as possible questions on SO, your description is fine - But I'm pretty sure that provided with code snippet your question would not got closed by on of the moderators here. So you can [edit](http://stackoverflow.com/posts/38142074/edit) your post with the missing details, or accept one of the answers if you find them helpful. BTW - It's not personal :) I wish you all the best — Alon Eitan, Jul 01 '16 at 10:04

score 1 · Accepted Answer · answered Jul 01 '16 at 09:43

1

Try using the display: inline-block property on your container.

.container {
  width: 100%;
  display: inline-block;
  background-color: #EEE;
}

.container .inner {
  width: 100px;
  height: 100px;
  background-color: red;
  float: right
}

<div class="container">
  <div class="inner"></div>
</div>

answered Jul 01 '16 at 09:43

JasonK

5,214
9
33
61

yes, this is working. the overflow:hidden way is working two. another thing is, it should just work like this... without this tricks. – linearSpin Jul 01 '16 at 10:06
Then I guess your question is answered, please mark the answer you think fits best as accepted. More information on how and why we use clearfix is described (in detail) here: http://stackoverflow.com/questions/8554043/what-is-clearfix – JasonK Jul 01 '16 at 17:04

score 0 · Answer 2 · answered Jul 01 '16 at 09:43

0

if you are using bootstrap, you can add class clearfix to parent div of float element.

answered Jul 01 '16 at 09:43

Sergey Fedirko

659
1
7
17

containing box size doesn't change when inside element float

2 Answers2