3 Replies Latest reply on Apr 28, 2010 10:17 AM by Jane Smith 2300

    how to split a DIV vertically??

    Jane Smith 2300 Level 1

      Hi,

       

      I'm a newbie regarding DIVs.

       

      I made a 3-column page using CSS and DIVs. Now I want to take a portion of Column 2 and split the top part of the column into two parts VERTICALLY.

       

      I made a smaller DIV in the Column 2 DIV. No problem. Went to make a second small DIV next to the other small one (am trying to split this "cell' into two vertically) and I can't do it. The second small DIV gets shoved under the first one.

       

      So, can someone point me to a place where I can see the code for making two DIVs be side by side in a larger DIV??

       

      Somehow I could make DIVs be side-by-side columns, but I can't make a side-by-side DIVs inside a larger DIV?? Where am I going wrong?

       

      Thank you in advance.

       

      Jane

        • 1. Re: how to split a DIV vertically??
          Jane Smith 2300 Level 1

          Hi,

           

          This is an idea I had--it looked sort of correct in DW CS4, but it didn't look correct on the page:

           

           

          <div style=float:left; clear:right; width: 224px;>

          <p class="mainstory">I want this column to occupy the left half the width of the column</p>

             </div>

           

             <div style=float:left; clear:right; width: 224px;>

          <p class="mainstory">I want this column to occupy the right half of the column</p>

           

          </div>

           

           

          Am I on the right track??

           

          Jane

          • 2. Re: how to split a DIV vertically??
            osgood_ Level 8

            Yes, you are basically going about it the correct way. See the code below, select all and insert into a new Dreamweaver document. Look at the css. Basically the same as what you are doing. If all your maths are correct yours should work, but you don't need clear: right;

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            #colWrapper {
            margin: 0 auto;
            width: 898px;
            }
            #colOne, #colThree {
            float: left;
            width: 225px;
            }
            #colTwo {
            float: left;
            width: 448px;
            }
            #colTwoLeft, #colTwoRight {
            float: left;
            width: 224px;
            }
            </style>
            </head>

             

            <body>
            <div id="colWrapper">
            <div id="colOne">Column One</div>
            <div id="colTwo">
            <div id="colTwoLeft">Column Two Left</div>
            <div id="colTwoRight">Column Two Right</div>
            </div><!-- end colTwo -->
            <div id="colThree">Column Three</div>
            </div><!-- end colWrapper -->
            </body>
            </html>

            • 3. Re: how to split a DIV vertically??
              Jane Smith 2300 Level 1

              Thank you for your answer.  Much appreciated.

               

              Jane