Home/ Questions/Q 8045761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T05:38:15+00:00

I’m trying to decide no the best way to make a side-by-side column-like layout

  • 0

I’m trying to decide no the best way to make a side-by-side column-like layout using CSS and divs.

For some reason when I use display: inline-block;, if the aggregate width of the column-divs is equal to 100%, the last div wraps onto the next line. However, if I use floating divs, this doesn’t happen, even with identical width.

For example, the two divs in this example appear on different lines:

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />

        <style type="text/css">

            .column {   width: 50%;
                        display: inline-block;
                    }

        </style>

    </head>

    <body>

        <div class="column">

            Column 1

        </div>

        <!--    This div is on the second line  -->
        <div class="column">

            Column 2

        </div>

    </body>

</html>

But in this example they don’t:

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />

        <style type="text/css">

            .column {   width: 50%;
                        float: left;
                    }

        </style>

    </head>

    <body>

        <div class="column">

            Column 1

        </div>

        <div class="column">

            Column 2

        </div>

    </body>

</html>

Using both Chrome and IE8.

Why does this happen?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    inline-block respects white-space in your markup. try:

    <div class="column">Column 1</div><div class="column">Column 2</div>

    see what happens

    • 0