How can I keep an element under a floated one?

Question

Here is my code:

.one, .two{
  border: 1px solid;
}

.one{
  float:left;
  display: block;
  clear:both;
}

.two{
  display: block;
  width: 100%;
}

<div class="one">something</div>
<div class="two">something else</div>

As you can see both elements are next to each other. While I want to keep them under each other. I mean the div.two should be on the bottom of div.one. Noted that div.one should have float:left property (I cannot remove it).

Also both clear:both and display:block doesn't work as expected. Any idea how can I do that?

here is some easy reading about float behaviors and how to deal with it https://css-tricks.com/all-about-floats/ — G-Cyrillus, Jul 06 '18 at 18:44

score 3 · Answer 1 · answered Jul 06 '18 at 17:45

3

Just add clear to the second div, see below

.one, .two{
  border: 1px solid;
}

.one{
  float:left;
  display: block;
  clear:both;
}

.two{
  display: block;
  width: 100%;
clear: both;
}

<div class="one">something</div>
<div class="two">something else</div>

answered Jul 06 '18 at 17:45

Jismon Thomas

783
1
6
22

Ok thank you .. upvote. Just another related question. Why `margin-too: 5px;` on `div.two` doesn't apply? – Martin AJ Jul 06 '18 at 17:48
`margin-too` is supposed to be `margin-top` – Sushanth -- Jul 06 '18 at 17:52
@Sushanth-- Well yes, I meant that. But it doesn't work https://jsfiddle.net/dgwbvxuk/ – Martin AJ Jul 06 '18 at 17:55
@martin, after you float something it is no longer used to find the margin by the element below that. You can find proper explanation here: https://stackoverflow.com/questions/1883414/why-top-margin-of-html-element-is-ignored-after-floated-element – Jismon Thomas Jul 06 '18 at 17:55
@MartinAJ Check the possible solution I have posted below. – Sushanth -- Jul 06 '18 at 18:17
You could add to your answers a few others ways to clear the float aside the width:100% `overflow, float, display(s)`, It will help the op understands what's going on with float and how to deal with or mind them when used ;) – G-Cyrillus Jul 06 '18 at 18:50

score 1 · Answer 2 · answered Jul 06 '18 at 18:14

You can use flexbox layout for this use case. Margin also plays pretty well with this and lot more flexible than using floated elements.

.one,
.two {
  border: 1px solid;
}

.one {
  align-self: baseline;
}

.two {
  flex-basis: 100%;
  margin-top: 125px;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

<div class="wrapper">
  <div class="one">something</div>
  <div class="two">something else</div>
</div>

You just have a parent container that acts as the flex container and the 2 divs act as their children.

How can I keep an element under a floated one?

2 Answers2