locked
Inline-Block Divs Not Wrapping RRS feed

  • Question

  • User1928065626 posted

    I am trying to make my inline-block Divs wrap when the page width is too small to hold all of the Divs in a single row but it's not working. I do not want to set the width of my Divs using pixels, can I make my Divs wrap to the next line using percentage width for the Divs? Please see my code below.

       html, body{padding:0; margin:0}
       #page{width:800px; height:300px;background:#7aa7ef}
       #div1{display:inline-block; width:40%; height:80px; margin:5px; background:gray; ;}
       #innerDiv{width:30%; height:80px;background:red; ;left:10px;}
       #div2{display:inline-block;width:20%; height:80px; margin:5px; background:yellow; ;}
       #div3{display:inline-block;width:20%; height:80px; margin:5px; background:blue; ;}
       #div4{display:inline-block;width:20%; height:80px; margin:5px; background:orange; ;}
    
     <div id="page">
       <div id="div1">
         <div id="innerDiv">
         </div>
       </div>
       <div id="div2">
       </div>
       <div id="div3">
       </div>
       <div id="div4">
       </div>
     </div>

    Saturday, May 12, 2018 4:07 PM

All replies

  • User-474980206 posted

    not sure your issue. they wrap. the width adds up  to 100%, and you have added margins, so they will not fit on 1 line.

     

    Sunday, May 13, 2018 11:26 PM
  • User36583972 posted


    Hi madjester,

    You can try the following sample. The Div will Wrap to new line when there is no more space.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            div {
                display: inline-block;
                zoom: 1;
            }
        </style>
        <script>
    
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <div style="text-align: center;">
                <div style="border: 1px solid #000; display: inline-block;">
                    <div>Lorem ipsum dolor sit amet nuncia est</div>
                    <div>Lorem ipsum dolor sit amet nuncia est</div>
                </div>
                <div style="border: 1px solid red; display: inline-block;">Div 2</div>
                <div>Lorem ipsum dolor sit amet nuncia est</div>
                <div>Lorem ipsum dolor sit amet nuncia est</div>
                <div>Lorem ipsum dolor sit amet nuncia est</div>
                <div>Lorem ipsum dolor sit amet nuncia est</div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Yong Lu

    Monday, May 14, 2018 6:58 AM