Home/ Questions/Q 8170663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T21:11:55+00:00

I wrote a page with flex columns using ‘display:inline-block’ as in this demo ,

  • 0

I wrote a page with flex columns using ‘display:inline-block’ as in this demo, but met a problem with white-spaces and newlines:

Even though .left and .right are both width:50%, but since there are white-spaces and a newline between them, they actually take up more than 100% width and so .right just goes to next line.

<!--demo 1-->
<div class="container">
    <div class="left box">
    </div>
    <div class="right box">
    </div>
</div>

Deleting white-spaces and newlines between .left and .right works, and now they are on the same line, but the HTML is less expressive.

<!--demo 2-->
<div class="container">
    <div class="left box">
    </div><div class="right box">
    </div>
</div>

So, anyway to keep indents?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working Fiddle

    Add two classes in CSS:

    .lfloat {
    float: left;
}

.clrflt {
    clear: both;
}

    Change your HTML code to:

    <!--demo 1-->
<div class="container">
    <div class="left box lfloat"></div>
    <div class="right box lfloat"></div>
    <div class="clrflt"></div>
</div>

    EDITED

    inline-blocking adds a 4px border (due to which it shifts the div to the next line). Hence, float is a more preferred way.

    You can see this fiddle that uses display:inline-block:

    <html>
    <head>
        <style>
        *{padding:0;margin:0}
        ul#container{width:204px}  //Had to add 4px for extra width
         ul#container li{display:inline-block;height:100px;width:100px;background:#666}
        .left{width:50%}
        .right{width:50%;background:#0ca}
        </style>
    </head>
    <body>
        <ul id="container">
           <li>Left</li>
           <li>Right</li>
        </ul>
    </body>
    </html>

    You can read more about these issues at a blog here.

    • 0