0
  1. I created a div element with id inner with some width
  2. I added two child div element inside id inner with equal width.
  3. When i give child element float: left property they come adjacent each other however when i give display: inline-block it does not remain adjacent it moves down. Could you please update why its not adjusting in case of display: inline-block

Code with float its working. childs are adjacent

* {
  box-sizing: border-box;
}

#outer {
  width: 700px;
  height: 400px;
  border: 1px solid #006669;
}

#inner {
  margin-left: 99px;
  margin-right: 99px;
  margin-top: 49px;
  margin-bottom: 49px;
  width: 500px;
  height: 300px;
  border: 1px solid crimson;
}

#child1 {
  float: left;
  width: 249px;
  height: 300px;
  background: darkgreen;
}

#child2 {
  float: left;
  width: 249px;
  height: 300px;
  background: darkcyan;
}
<div id="outer">
  <div id="inner">
    <div id="child1">Child1</div>
    <div id="child2">Child2</div>
  </div>
</div>

Code with inline block its not working. childs are not adjacent

  *{
            box-sizing: border-box;
        }
        #outer{
            width: 700px;
            height: 400px;
            border: 1px solid #006669;
        }
        #inner{
            margin-left: 99px;
            margin-right: 99px;
            margin-top: 49px;
            margin-bottom: 49px;
            width: 500px;
            height: 300px;
            border: 1px solid crimson;
        }
        #child1{
            display: inline-block;
            width: 249px;
            height: 300px;
            background: darkgreen;
        }
        #child2{
            display: inline-block;
            width: 249px;
            height: 300px;
            background: darkcyan;
        }
        
    <div id="outer">
        <div id="inner">
            <div id="child1">Child1</div>
            <div id="child2">Child2</div>
        </div>
    </div>
Dai
  • 141,631
  • 28
  • 261
  • 374
Rahul Singh
  • 41
  • 4
  • 2
    You haven't left enough room for them both to sit alongside each other. – A Haworth Oct 04 '22 at 05:26
  • no if we use float:left its giving the result . – Rahul Singh Oct 04 '22 at 07:02
  • you can paste above code on html with float:left to see the result and also you can view the same using display:inline-block. i have provided the style and the body code for the same @AHaworth – Rahul Singh Oct 04 '22 at 07:15
  • Yes, they fit when you float left, but you've forgotten other things that take up space when inline-block. I'll put up an answer to explain a bit more. – A Haworth Oct 04 '22 at 07:42
  • 1
    Honestly, just use `display: flex;`. We shouldn't be (ab)using `float:` for layout: it's purpose is for oranate drop-caps and embedded content that text flows around, not layout containers. – Dai Oct 04 '22 at 07:55
  • @Dai, I agree for a 'real life' circumstance flex or grid would be the way to go, but I think the questioner was asking for an explanation of why inline-block behaved differently from float. (And there are times one needs float and nothing else will do so it's worth distinguishing it from inline-block). – A Haworth Oct 04 '22 at 10:29
  • i will try to follow what @Dai has said . I couldn't distinguish the reason why display: inline-block did not behave like float:left. When there was space to be occupied by div – Rahul Singh Oct 04 '22 at 11:16
  • Are you now happy that you understand why inline-block took more horizontal space? – A Haworth Oct 04 '22 at 11:27

1 Answers1

0

You've forgotten a couple of things that take up additional space - the gap the system puts in between inline-block elements and the fact that you've put a border on inner and set box-sizing to border-box.

Remove the border and set the font-size to zero and the elements will fit side by side.

<style>
  * {
    box-sizing: border-box;
  }
  
  #outer {
    width: 700px;
    height: 400px;
    border: 1px solid #006669;
  }
  
  #inner {
    margin-left: 99px;
    margin-right: 99px;
    margin-top: 49px;
    margin-bottom: 49px;
    width: 500px;
    height: 300px;
    /*border: 1px solid crimson;*/
    font-size: 0px;
  }
  
  #child1 {
    display: inline-block;
    width: 250px;
    height: 300px;
    background: darkgreen;
  }
  
  #child2 {
    display: inline-block;
    width: 250px;
    height: 300px;
    background: darkcyan;
  }
</style>

<body>
  <div id="outer">
    <div id="inner">
      <div id="child1"></div>
      <div id="child2"></div>
    </div>
  </div>
</body>

While I understand the gap part, I do not fully understand the border part as you had allowed for 2 x 1px by setting the width of each div to 249px. Is there some rounding error going on? I do often see a spurious gap of a part CSS pixel (but 1 screen pixel) between background color and border (changes with zoom) which indicates some mismatch when the system is trying to do the mapping between the several screen pixels which make up one CSS pixel on modern screens. Hopefully someone can confirm this or provide another explanation.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • yes it works but i do not understand why we need to keep font-size: 0px. if i remove the font-size the above code does not work. width is 500px and in that border is 1px left and 1px right . so the remaining width is 498px. this 498 px width is divided with two children div of 298px both. when i use float:left it keeps itself adjacent however with display: inline-block it does not do the same – Rahul Singh Oct 04 '22 at 08:23
  • inline-block puts a space between blocks which is related to the current font-size. That's why it needs to be 0 (there are other ways of getting things on the same line of course like flex or grid, but your question was specifically about inline-block. – A Haworth Oct 04 '22 at 10:26
  • yes @A Haworth. I support what you said. I was trying to learn display:inline-block property . I was trying to find the reason why its behaving differently – Rahul Singh Oct 04 '22 at 11:18