[RESOLVED]How do I set the precedence of which divs wrap in a form if they are set to position relative?

if I have the following div’s, how do I control which div wraps when the width of the form gets to small to show them horizontally?

<div id="div0" style="float: left; width: 100px; display: inline-block">

            <div id="div1" style="float: left; width: 100px; display: inline-block">

             <div id="div2" style="float: left; width: 100px; display: inline-block">

                      <div id="div2a" style="float: left; width: 100px; display: inline-block">

                       </div>

                      <div id="div2b" style="float: left; width: 100px; display: inline-block">

                     </div>

              </div>

     </div>

</div>

I am trying to make div2b wrap below div2a, but instead, div2 wraps below div1

Hi JAYHAWKER,

Thanks for your post.

JAYHAWKER

I am trying to make div2b wrap below div2a, but instead, div2 wraps below div1

Firstly, according to your description, I can’t understand your requirement very well. Could you explain more about your requirement?

JAYHAWKER

<div id="div0" style="float: left; width: 100px; display: inline-block">

            <div id="div1" style="float: left; width: 100px; display: inline-block">

             <div id="div2" style="float: left; width: 100px; display: inline-block">

                      <div id="div2a" style="float: left; width: 100px; display: inline-block">

                       </div>

                      <div id="div2b" style="float: left; width: 100px; display: inline-block">

                     </div>

              </div>

     </div>

</div>

Secondly, based on your code, div2 is a child element of div1, so div2 will inside div1. Besides, div2a and div2b are Sibling elements and they float to the left, in this situation, the page will show div2b below div2a.

Best Regards,

Fei Han

Thanks for your efforts.  With displays set to inline-block, div2b will be below div2a depending on div2 width.  They are on top of each other depending on the width of the parent div. 

If you take the following example, you will see that depending on the width of your browser window. the div’s are either next to each other, or on top of each other.  If you resize the page making it smaller, you will see div2 wraps below div1 before div2b
wraps below 2a.  I am using JavaScript to sense the width of div 2 and hand then wrap it first, but I am hoping there is a simpler way.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testWrap.aspx.vb" Inherits="RLTPro.testWrap" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <form id="form1" runat="server">
        <div id="div0" style="float: left; width: 100%;   height: 800px; background-color: yellow;  display: inline-block">
            <div id="div1" style="float: left; width: 500px;  height: 500px;  background-color: red; display: inline-block">
            </div>
            <div id="div2" style="float: left; min-width: 100px;  height: 500px; background-color: blue; display: inline-block">
                <div id="div2a" style="float: left; width: 200px;  height: 100px;  background-color: gray;  display: inline-block">
                </div>
                <div id="div2b" style="float: left; width: 200px; height: 100px;  background-color: lime;  display: inline-block">
                </div>
            </div>
        </div>
    </form>
</body>
</html>

I’m sorry that I still can’t understand what you are after. Is below meet your requirements?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="ForumTest.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="div0" style="float: left; width: 100%; height: 800px; background-color: yellow; display: inline-block">
            <div id="div1" style="float: left; width: 500px; height: 500px; background-color: red;">
            </div>
            <div id="div2" style="float: left; min-width: 100px; height: 500px; width: 40%; background-color: blue;">
                <div id="div2a" style="float: left; width: 200px; height: 100px; background-color: gray; display: inline-block">
                </div>
                <div id="div2b" style="float: left; width: 200px; height: 100px; background-color: lime; display: inline-block">
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Note that I gave percentage width for the div2 and got rid of the display:inline-block for both div1 and div2.

Leave a Reply