Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search