Why is this DIV wrapping to the next line?

2661 views css
9

I'm learning about CSS DIVs and have run into a problem.

I've got an outer Div that is Box-Sizing:content-box, width:402px And two inner boxes with Box-sizing:border-box; width:200px

There should be room for both inner Div boxes side by side. But the second Box wraps to the next line. If I increase width of Outer Div to 410px, then both boxes appear on the same line but with space between them.

I get the same results in Chrome and Firefox (on Windows 7)

enter image description here

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
</head>

<body>
<style>

.col1{
    display:inline-block;
    border-color:gray;
    border-width:1 px;
    border-style:dashed;
    box-sizing: border-box;

}

.blue {
    background-color:aqua;

}
.yellow {
    background-color:yellow;
}

</style>

<div id="outerdiv" >
<div  >   Row above 2 columns</div>

    <div  class="col1 blue">Col1</div>
    <div class="col1 yellow" style='width:200px'>Col2
    </div>


</div>
</body>

</html>

answered question

1 Answer

1

<div id="outerdiv" style="box-sizing: content-box; width:402px; border:darkgray 1px dotted">
<div style="display:block;" >   Row above 2 columns</div>

   
   <table>
    <tr>
    <th><div style="width:200px;" class="col1 blue">Col1</div></th>
    <th><div class="col1 yellow" style='width:200px'>Col2
    </div></th></tr>

  </table>

posted this

Have an answer?

JD

Please login first before posting an answer.