2 Replies Latest reply on Mar 8, 2010 2:41 PM by Nancy OShea

    4 Column Layout Problems, help?

    daneveritt

      Ok, so I've been trying to do a four column layout for this website I'm working on. I've been trying to do the following:

       

      #sectionwrapper {

         width: 1026px;
          height:282px;



      }

      #section1 {
          float: left;
          width: 470px;
          height: 252px;

      }



      #newsbody {
          width: 230px;
          height: 250px;
          padding-top: 20px;
          float: left;

      }   

      #blogbody {
         width: 230px;
          height: 250px;
          padding-top: 20px;
          float: right;

      }

      #section2 {
          float: right;
          width: 470px;
          height: 272px;

      }

      #twitterbody {
          width: 230px;
          height: 250px;
          padding-top: 20px;
          float: left;
       

      }


      #biffyinyabox {
          width: 230px;
          height: 250px;
          padding-top: 20px;
          float: right;

      }

       

      Thats the CSS, and the HTML:

       

      <div id="sectionwrapper">
          <div id="section1">
          <div id="newsbody">
              <img src="newsheader.jpg" alt="NEWS" />
                 <div class="title">
                  BIFFY TO PERFORM AT NME AWARDS!
              </div><!--END title-->
            </div><!--END newsbody-->
          <div id="blogbody">
              <img src="blogheader.jpg" alt="BLOG" />
              <div class="title">
                  HALFWAY THROUGH IS A NICE PLACE TO BE...
              </div><!--END blogbody-->
            </div><!--END section1-->
          <div id="section2">
          <div id="twitterbody">
          <img src="twitterheader.jpg" alt="TWITTER" />
          </div>
          </div>
            </div><!--END sectionwrapper-->     
            
      </div><!--END wrapper-->
      </body>
      </html>

       

      Now, my problem is that the 'twitterheader.jpg' keeps positioning itself underneath the blog header, and the news header. Is there any way I can position it to the right of the blog header? I've tried floating it, but it still goes underneath. Hope this makes sense.

        • 1. Re: 4 Column Layout Problems, help?
          daneveritt Level 1

          Anyone? I seriously need help here, otherwise I'm probably going to fail my uni course.

          • 2. Re: 4 Column Layout Problems, help?
            Nancy OShea Adobe Community Professional & MVP

            First of all, get rid of the height rules.  These will mess you up big time because height value is a restriction in all

            browsers (except IE).

             

            Try this:

             

            <!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=iso-8859-1" />
            <title>Untitled Document</title>
            <style type="text/css">
            body {font-family:Verdana, Arial, Helvetica, sans-serif; background: #CCC;margin:0; padding:0; line-height: 100%; font-size: 100%;
            }
            #sectionwrapper {
            width: 950px;
            margin: 0 auto;
            background: #FFF;
            }
            #section1 {
            height: 1%; /**IE bug fix**/
            width: 470px;
            border: 1px solid red;
            overflow: hidden;
            }
            #newsbody {
            width: 230px;
            padding-top: 20px;
            float: left;
            }   
            #blogbody {
            width: 230px;
            padding-top: 20px;
            float: right;
            }
            #section2 {
            height: 1%;/**for IE**/
            width: 470px;
            float: right;
            border: 1px solid blue;
            overflow: hidden;
            }
            #twitterbody {
            width: 230px;
            padding-top: 20px;
            float: left;
            }
            #biffyinyabox {
            width: 230px;
            padding-top: 20px;
            float: right;
            }
            </style>
            </head>
            <body>
            <div id="sectionwrapper">
            <div id="section2">
            <div id="twitterbody">
            <p><img src="twitterheader.jpg" alt="TWITTER"  /></p>
            <p>section2</p>
            <p>twitterbody</p>
            </div> <!--end twitter -->
            <div id="biffyinyabox">
            <p>section2</p>
            <p>Biffy in a box</p>
            </div>  <!--end biffy -->
            </div>  <!--end section2 -->
            <div id="section1">
            <div id="newsbody">
            <img src="newsheader.jpg" alt="NEWS" />
            <div class="title">
            <p>Section1</p>
            <p>newsbody</p>
            <p>BIFFY TO PERFORM AT NME AWARDS! </p>
            </div>  <!--END title-->
            </div>  <!--END newsbody-->
            <div id="blogbody">
            <img src="blogheader.jpg" alt="BLOG" />
            <div class="title">
            <p>Section1</p>
            <p>blogbody</p>
            <p>HALFWAY THROUGH IS A NICE PLACE TO BE... </p>
            </div> <!--end title -->
            </div>  <!--END blogbody-->
            </div><!--END section1-->
            </div><!--END sectionwrapper-->     
            </body>
            </html>
            

             

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com