Tue. Sep 19th, 2023

[ANSWERED] html – Why when i use float, last item going on next line?

By

Nov 20, 2022 css, css-float, html

Solution 1 :

3 * (30% + 5%) equals 105% (= wider than 100%), that’s the reason. Change the margin value to 3% and it will work (3* (30% + 3%) = 99%).

.clearfix::after {
  content: " "; 
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top:20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding:20px;
  margin:auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  margin-left: 3%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}

<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>

As an alternative, you could apply the left margin only to the second and third block and leave it at 5%. This will also keep the blocks centered inside their container:

.clearfix::after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top: 20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding: 20px;
  margin: auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}

.item-2,
.item-3 {
  margin-left: 5%;
}

<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>

Problem :

I do not understand why and how to fix a fact that the red block is going to the next line. Ofc i can use margin-left: 5% to the 2nd and 3rd block to fix it but that’s not right. So how to spread all three blocks in one line and make their total width with margins equal 100%?

.clearfix::after {
  content: " "; 
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top:20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding:20px;
  margin:auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  margin-left: 5%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}

<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>

Comments

Comment posted by Mikita Kazlouski

But if use it like you said those blocks will be no in the middle of white container cos yellow block will have 3.3% margin

Comment posted by Johannes

I just added a second version that deals with this

By

Related Post

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022