CSS – Inline block is ignored due to float?

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.

>Solution :

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-block, it will be automatically converted/computed to block

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.