CODEWITHSUNDEEP
htmlcsscss-float
Suraj Kumar
Suraj Kumar

Reputation: 21

HTML CSS floats and inline-block issues

There are three blocks, first and last one are floated left and the middle one is displayed inline-block and cleared both. Why my middle block is coming at the end? Here is my code.

.box {
  width: 200px;
  height: 200px;
  background: red;
}
.block {
  height: 200px;
  width: 200px;
  background: blue;
  display: inline-block;
  clear: both;
}
.box1 {
  float: left;
}
.box2 {
  float: left;
  background: green;
}
<div class="box box1">1st Block</div>
<div class="block">Middle Block</div>
<div class="box box2">Third block</div>

https://codepen.io/suraj_122/pen/EdZpag

Upvotes: 1

Views: 85

Answers (4)

Mohammed Rabiulla RABI
Mohammed Rabiulla RABI

Reputation: 493

All float elements placed from left first one after the other and then other unfloated elements are placed

if you want the block element to be in middle

then make this .box1{ float:left;} .box2{ float:right;}

and then automatically the inline block element will come to center.

i suggest you to make all the elements inline block itself as they are all same width and height.it is best way for responsive design also.

Upvotes: 1

Ofir Nagadi
Ofir Nagadi

Reputation: 179

You can remove the inline-block from the middle block (.block) and rap it all inside new div that row's it all. Just like this:

CSS:

.rowed {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

HTML:

<div class="rowed">
  <div class="box box1">1st Block</div>
  <div class="block">Middle Block</div>
  <div class="box box2">Third block</div>
</div>

** Just like Bootstrap are doing

Upvotes: 0

Vijay Prajapati
Vijay Prajapati

Reputation: 73

Remove css in middle box "display: inline-block;clear: both;" and add " float:left"

.box {
  width: 200px;
  height: 200px;
  background: red;
}
.block {
  height: 200px;
  width: 200px;
  background: blue;
  /*
  display: inline-block;
  clear: both;
  */
  float:left;
}
.box1 {
  float: left;
}
.box2 {
  float: left;
  background: green;
}
<div class="box box1">1st Block</div>
<div class="block">Middle Block</div>
<div class="box box2">Third block</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

clear property applies to only block level elements, so adding it to the inline-block won't have any effect and will not clear float as you expect.

enter image description here

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still ref


inline-block

This value causes an element to generate an inline-level block containerref

Upvotes: 0

Related Questions