css arrange two div block in different row

Question

I am trying to arrange two div in different rows. They work fine until I add some float elements. Anybody could help me fix the issue? The second row cannot appear as a normal div block, I do not know how to fix this.

<style>
li {
    list-style-type: none;
}

h4 {
    float:left;
    
}
ul {
    float:right;
    
}
    
.first-block {
    
}    
    
.second-block {
    position:relative;
    
}
</style>

<div class="first-block">
    <h4>Left Top</h4>
    <ul><li>Right Top</li></ul>
</div>

<div class="second-block">
    <h4>Left Bottom</h4>
    <ul><li>Right Bottom</li></ul>
</div>

If you inspect the element in your browser you can see what happens. Because you use float the size of the `h4` and `ul` wont stretch the parent div so they will both have a size of 0 and will go side by side. — Nico Shultz, Jul 16 '20 at 07:42
Using float the element is removed from his normal flow. so the first and second block has width:0 and height:0. so first set .first-block{position:relative} and give to first and second block some dimension example width:100% and height:50px. Consider to use flexbox instead of float — Sfili_81, Jul 16 '20 at 07:44
Thanks to all heartwarming guys. I misunderstood the function `div` and think everything inside `div` will be separated in blocks. I will do as your guide. — Yuan, Jul 16 '20 at 07:48

score 3 · Answer 1 · answered Jul 16 '20 at 07:50

3

I think you need to clear float like this below

.second-block {
    position:relative;
    clear: both;
}

in this case using flex-box would be useful.

answered Jul 16 '20 at 07:50

Mukhtar Mahamed

161
1
1
8

Sfili_81 · Answer 2 · 2020-07-16T08:06:57.200

When you use float, the size of the container for the floated elements wont stertch beacuse the float elements is removed from the normal flow. So if you give some dimension to the container it will work.

Float documentation

But consider to use flexbox

li {
    list-style-type: none;
}

h4 {
    float:left;
    
}
ul {
    float:right;
}
    
.first-block {
    position:relative;
     width:100%;
    height:50px;
    border:1px solid blue;
}    
    
.second-block {
    position:relative;
    width:100%;
    height:50px;
    border:1px solid red;
}

<div class="first-block">
    <h4>Left Top</h4>
    <ul><li>Right Top</li></ul>
</div>

<div class="second-block">
    <h4>Left Bottom</h4>
    <ul><li>Right Bottom</li></ul>
</div>

score 1 · Accepted Answer · answered Jul 16 '20 at 07:48

1

You would need to clear your floats, as parents of floated elements do collapse. Read about how to use clearfix. One of many methods is to use an overflow: auto here.

But for what you might want to achieve, you might be better off using flexbox.

li {
  list-style-type: none;
}

div h4 {
  float: left;
}

div ul {
  float: right;
}

.block {
  overflow: auto;
}

.first-block {
  background-color: rgba(0, 0, 255, 0.1);
}

.second-block {
  background-color: rgba(0, 255, 0, 0.1);
}

<div class="block first-block">
  <h4>Left Top</h4>
  <ul>
    <li>Right Top</li>
  </ul>
</div>

<div class="block second-block">
  <h4>Left Bottom</h4>
  <ul>
    <li>Right Bottom</li>
  </ul>
</div>

answered Jul 16 '20 at 07:48

Daniel Sixl

2,488
2
16
29

What methods of ‘clearfix’ can I use? https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use – Daniel Sixl Jul 16 '20 at 07:49
How do you keep parents of floated elements from collapsing? https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing – Daniel Sixl Jul 16 '20 at 07:51
What is a clearfix? https://stackoverflow.com/questions/8554043/what-is-a-clearfix – Daniel Sixl Jul 16 '20 at 07:53

score 1 · Answer 4 · answered Jul 16 '20 at 07:50

Please check the code snippet below. Use clear: both CSS property to align the div in different rows.

Hope this will help.

<style>
li {
    list-style-type: none;
}

h4 {
    float:left;
    
}
ul {
    float:right;
    
}
    
.first-block {
    
}    
    
.second-block {
    position:relative;
    clear: both;
}
</style>

<div class="first-block">
    <h4>Left Top</h4>
    <ul><li>Right Top</li></ul>
</div>

<div class="second-block">
    <h4>Left Bottom</h4>
    <ul><li>Right Bottom</li></ul>
</div>

css arrange two div block in different row

4 Answers4