Inline block is ignored due to float?

  Kiến thức lập trình

i’m getting an error message that the inline-block is ignored due to the float. what does this mean and what should i revise within my code? does this affect anything?

.sidebar-left {
  width: 175px;
  float: left;
  }

.sidebar-right {
  width: 155px;
  float: right;
  display: inline-block;
  }
  
.main {
  width: 530px;
  margin-left: 10px;
  float: left;
  }

I’m trying to make 3 responsive boxes within rows, with each of the boxes coming one right after another with the box order not changing. My other boxes (‘sidebar-left’ and ‘main’) seem to be working fine though. The error message is popping up on the ‘sidebar-right’ code.

New contributor

chance is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

1

Point 1

i’m getting an error message that the inline-block is ignored due to the float.

when you use float on the element, the display property of the element must be either block, grid, flex or table.

If you set the display property to inline-xxx, it will be automatically converted/computed to block or block equivalent (such as inline-grid => grid).

float implies the use of the block layout

So, in your case, .sidebar-right element is automatically getting display: block property and your code display: inline-block; is being ignored.

more info

Point 2

I’m trying to make 3 responsive boxes within rows, with each of the boxes coming one right after another with the box order not changing.

You can use flexbox or grid

body {
    display:grid;
    grid-template-columns: 175px 530px 155px; 
    grid-template-area: "sidebar-left main sidebar-right"
}


.sidebar-left {
  grid-area: sidebar-left;

  }

.sidebar-right {
  grid-area: sidebar-right;

  }
  
.main {
  grid-area: main
  margin-left: 10px;

  }

As for responsiveness, you can change the number of columns and column width on grid-template-columns: 175px 530px 155px; line as you like.

inline-block is ignored due to the float. If float has a value other than none, the box is floated and display is treated as block.

Take a look at this article: https://vanseodesign.com/css/inline-blocks/

0

LEAVE A COMMENT