Loading ...
Sorry, an error occurred while loading the content.

Not able to get 2 columns of 50% each

Expand Messages
  • Brendan Vogt
    Hi there, I have 3 columns, in the centre column I am trying to get 2 columns of 50% each, it s not displaying correctly, both are shifted to the right hand
    Message 1 of 6 , Nov 26, 2008
    • 0 Attachment
      Hi there,

      I have 3 columns, in the centre column I am trying to get 2 columns of 50% each, it's not displaying correctly, both are shifted to the right hand side.

      <div id="doc4" class="yui-t2">
         
            <div id="hd">Lorem ipsum...</div>
            <div id="bd">
              <div class="yui-b">Lorem ipsum...</div>
              <div id="yui-main">
                <div class="yui-b">
                  <div class="yui-ge">
                    <div class="yui-u first">
                   
                      <div class="yui-g">
                        <div class="yui-u first">LEFT</div>
                        <div class="yui-u">RIGHT</div>
                      </div>
                   
                    </div>
                    <div class="yui-u">Lorem ipsum...</div>
                  </div>
                </div>
              </div>
            </div>
            <div id="ft">Lorem ipsum...</div>
         
          </div>

      Please can someone advise on how to solve this?  And why it is displaying like this?

      Thanks
      Brendan
    • Satake
      ... of 50% ... Is this do what you want? YUI: CSS Grid Builder
      Message 2 of 6 , Nov 26, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "Brendan Vogt"
        <brendan.vogt@...> wrote:
        >
        > Hi there,
        >
        > I have 3 columns, in the centre column I am trying to get 2 columns
        of 50%
        > each, it's not displaying correctly, both are shifted to the right hand
        > side.

        Is this do what you want?

        <div id="doc4" class="yui-t2">
        <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
        <div id="bd">
        <div id="yui-main">
        <div class="yui-b">
        <div class="yui-gb">

        <div class="yui-u first"><p>Col 1</p></div>

        <div class="yui-g">
        <div class="yui-u first"><p>Col 2 50%</p></div>
        <div class="yui-u"><p>Col 2 50%</p></div>
        </div>

        <div class="yui-u"><p>Col 3</p></div>

        </div>
        </div>
        </div>

        <div class="yui-b"><p>Navigation</p></div>

        </div>
        <div id="ft">Footer is here.</div>
        </div>
      • Nate Koechley
        Hey Brendan, When you re nesting a g inside of another g , it can be a direct child of the parent g instead of living within a u . In other words, g
        Message 3 of 6 , Nov 26, 2008
        • 0 Attachment
          Hey Brendan,

          When you're nesting a "g" inside of another "g", it can be a direct child of the parent "g" instead of living within a "u". In other words, "g" acts like "u" when you're nesting.

          You had this:

          <div class="yui-ge">
          <div class="yui-u first">
          <div class="yui-g">

          But this works better:

          <div class="yui-ge">
          <div class="yui-g first">

          (Note that you still need to denote the "first".)

          Here's an example:

          Thanks,
          Nate




          On Nov 26, 2008, at 9:19 AM, Brendan Vogt wrote:

          Hi there,

          I have 3 columns, in the centre column I am trying to get 2 columns of 50% each, it's not displaying correctly, both are shifted to the right hand side.

          <div id="doc4" class="yui-t2">
              
                <div id="hd">Lorem ipsum...</div>
                <div id="bd">
                  <div class="yui-b">Lorem ipsum...</div>
                  <div id="yui-main">
                    <div class="yui-b">
                      <div class="yui-ge">
                        <div class="yui-u first">
                        
                          <div class="yui-g">
                            <div class="yui-u first">LEFT</div>
                            <div class="yui-u">RIGHT</div>
                          </div>
                        
                        </div>
                        <div class="yui-u">Lorem ipsum...</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="ft">Lorem ipsum...</div>
              
              </div>

          Please can someone advise on how to solve this?  And why it is displaying like this?

          Thanks
          Brendan

        • Brendan Vogt
          Hey Nate/Satake, Sorry for the confusion. The code that I sent you has 3 columns. The left and right columsn need to be there. It s the centre/middle column
          Message 4 of 6 , Nov 28, 2008
          • 0 Attachment
            Hey Nate/Satake,

            Sorry for the confusion.  The code that I sent you has 3 columns.  The left and right columsn need to be there.  It's the centre/middle column that I need to be divided it to 2 columns of 50% each.

            Please can you work from my code that I originally sent you guys.

            Thanks
            Brendan


            2008/11/26 Nate Koechley <natek@...>

            Hey Brendan,


            When you're nesting a "g" inside of another "g", it can be a direct child of the parent "g" instead of living within a "u". In other words, "g" acts like "u" when you're nesting.

            You had this:

            <div class="yui-ge">
            <div class="yui-u first">
            <div class="yui-g">

            But this works better:

            <div class="yui-ge">
            <div class="yui-g first">

            (Note that you still need to denote the "first".)

            Here's an example:

            Thanks,
            Nate




            On Nov 26, 2008, at 9:19 AM, Brendan Vogt wrote:

            Hi there,

            I have 3 columns, in the centre column I am trying to get 2 columns of 50% each, it's not displaying correctly, both are shifted to the right hand side.

            <div id="doc4" class="yui-t2">
                
                  <div id="hd">Lorem ipsum...</div>
                  <div id="bd">
                    <div class="yui-b">Lorem ipsum...</div>
                    <div id="yui-main">
                      <div class="yui-b">
                        <div class="yui-ge">
                          <div class="yui-u first">
                          
                            <div class="yui-g">
                              <div class="yui-u first">LEFT</div>
                              <div class="yui-u">RIGHT</div>
                            </div>
                          
                          </div>
                          <div class="yui-u">Lorem ipsum...</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="ft">Lorem ipsum...</div>
                
                </div>

            Please can someone advise on how to solve this?  And why it is displaying like this?

            Thanks
            Brendan


          • Nate Koechley
            Hey Brendan, Yes, I believe that is what I reproduced in my example. Did you look at the example I made for you? ... Thanks, Nate
            Message 5 of 6 , Nov 30, 2008
            • 0 Attachment
              Hey Brendan,

              Yes, I believe that is what I reproduced in my example. Did you look at the example I made for you?

              Thanks,
              Nate



              On Nov 28, 2008, at 11:30 AM, Brendan Vogt wrote:

              Hey Nate/Satake,

              Sorry for the confusion.  The code that I sent you has 3 columns.  The left and right columsn need to be there.  It's the centre/middle column that I need to be divided it to 2 columns of 50% each.

              Please can you work from my code that I originally sent you guys.

              Thanks
              Brendan


              2008/11/26 Nate Koechley <natek@...>

              Hey Brendan,


              When you're nesting a "g" inside of another "g", it can be a direct child of the parent "g" instead of living within a "u". In other words, "g" acts like "u" when you're nesting.

              You had this:

              <div class="yui-ge">
              <div class="yui-u first">
              <div class="yui-g">

              But this works better:

              <div class="yui-ge">
              <div class="yui-g first">

              (Note that you still need to denote the "first".)

              Here's an example:


              Thanks,
              Nate




              On Nov 26, 2008, at 9:19 AM, Brendan Vogt wrote:

              Hi there,

              I have 3 columns, in the centre column I am trying to get 2 columns of 50% each, it's not displaying correctly, both are shifted to the right hand side.

              <div id="doc4" class="yui-t2">
                  
                    <div id="hd">Lorem ipsum...</div>
                    <div id="bd">
                      <div class="yui-b">Lorem ipsum...</div>
                      <div id="yui-main">
                        <div class="yui-b">
                          <div class="yui-ge">
                            <div class="yui-u first">
                            
                              <div class="yui-g">
                                <div class="yui-u first">LEFT</div>
                                <div class="yui-u">RIGHT</div>
                              </div>
                            
                            </div>
                            <div class="yui-u">Lorem ipsum...</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="ft">Lorem ipsum...</div>
                  
                  </div>

              Please can someone advise on how to solve this?  And why it is displaying like this?

              Thanks
              Brendan



            • Brendan Vogt
              Hi Nate, Thanks for the layout. Let me give you some more details on my scenario. I have a left and a right column, and a centre column. In my centre column
              Message 6 of 6 , Dec 3, 2008
              • 0 Attachment
                Hi Nate,

                Thanks for the layout.  Let me give you some more details on my scenario.

                I have a left and a right column, and a centre column.  In my centre column I have many containers.  In each container I have a box.  Each box has a header, body and footer.  I need this 50%-50% columns to be in the header.

                Go and look at http://www.webmall4all.com/yui/default5.htm for what I am trying to achieve.  As what it looks now it is fine.  The issue that I am getting is when there is a lot of text in place of "LEFT PART BOX HEADER" then the columns are all messed up.  Download the files and check it out what I mean.  Please can you help me out here?  The stylesheet is really basic for now, nothing fancy.

                Thanks
                Brendan



                2008/12/1 Nate Koechley <natek@...>

                Hey Brendan,

                Yes, I believe that is what I reproduced in my example. Did you look at the example I made for you?

                On Nov 28, 2008, at 11:30 AM, Brendan Vogt wrote:

                Hey Nate/Satake,

                Sorry for the confusion.  The code that I sent you has 3 columns.  The left and right columsn need to be there.  It's the centre/middle column that I need to be divided it to 2 columns of 50% each.

                Please can you work from my code that I originally sent you guys.

                Thanks
                Brendan


                2008/11/26 Nate Koechley <natek@...>

                Hey Brendan,


                When you're nesting a "g" inside of another "g", it can be a direct child of the parent "g" instead of living within a "u". In other words, "g" acts like "u" when you're nesting.

                You had this:

                <div class="yui-ge">
                <div class="yui-u first">
                <div class="yui-g">

                But this works better:

                <div class="yui-ge">
                <div class="yui-g first">

                (Note that you still need to denote the "first".)

                Here's an example:


                Thanks,
                Nate




                On Nov 26, 2008, at 9:19 AM, Brendan Vogt wrote:

                Hi there,

                I have 3 columns, in the centre column I am trying to get 2 columns of 50% each, it's not displaying correctly, both are shifted to the right hand side.

                <div id="doc4" class="yui-t2">
                    
                      <div id="hd">Lorem ipsum...</div>
                      <div id="bd">
                        <div class="yui-b">Lorem ipsum...</div>
                        <div id="yui-main">
                          <div class="yui-b">
                            <div class="yui-ge">
                              <div class="yui-u first">
                              
                                <div class="yui-g">
                                  <div class="yui-u first">LEFT</div>
                                  <div class="yui-u">RIGHT</div>
                                </div>
                              
                              </div>
                              <div class="yui-u">Lorem ipsum...</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="ft">Lorem ipsum...</div>
                    
                    </div>

                Please can someone advise on how to solve this?  And why it is displaying like this?

                Thanks
                Brendan




              Your message has been successfully submitted and would be delivered to recipients shortly.