Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question 2 columns not in line?!

    ok so I have my leftside div and maincontent div the leftside is underneath the maincontent but on the left I have a float:left; on that and a float:right; on teh maincontent but it is not in line?!

    Code:
    <!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>SEWARD</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="js/jquery.positionBy.js"></script>
    <script type="text/javascript" src="js/jquery.jdMenu.js"></script>
    <link rel="stylesheet" href="css/jquery.jdMenu.css" type="text/css" />
    
    <link href="css/style1.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body>
    <div id="wrapper">
      <div id="topflash"><img src="images/topflash.jpg" border="0" alt="Seward" /></div>
    <div id="maincontent"><ul class="jd_menu jd_menu_slate">
    			<li><a href="index.htm">Home</a></li>
    			<li>About Us
          <ul>
    					<li><a href="company-profile.htm">Company Profile</a></li>
    					<li><a href="certificates.htm">Certificates</a></li>
    
    			  </ul>
    			</li>
    			<li>Products
    				<ul>
    					<li><a href="stomacher-400.htm">Stomacher 400</a></li>
                        <li><a href="stomacher-80.htm">Stomacher 80</a></li>
                        <li><a href="stomacher-80m.htm">Stomacher 80M</a></li>
                        <li><a href="stomacher-3500.htm">Stomacher 3500</a></li>
                        <li><a href="accessories.htm">Bags & Accessories</a></li>
                        <li><a href="faqs.htm">FAQs</a></li>
    				</ul>
    			</li>
    			<li>News & Events
           	  <ul>
                    	<li><a href="latest-news.htm">Latest News</a></li>
                        <li><a href="events.htm">Events</a></li>
                  </ul>
          </li>
                <li><a href="video.htm">Video</a></li>
                <li><a href="downloads.htm">Downloads</a></li>
                <li><a href="offers.htm">Offers</a></li>
                <li>Contact Us
          <ul>
                    	<li><a href="distributors.htm">Distributors</a></li>
                        <li><a href="distributor-application.htm">Distributor Application</a></li>
                  </ul>
                </li>
    		</ul>
           <div id="rightcolumn"><img src="images/stomacher400.jpg" border="0" alt="Stomacher 400" /><br /><img src="images/stomacher80.jpg" border="0" alt="Stomacher 400" /><br /><img src="images/stomacher3500.jpg" border="0" alt="Stomacher 400" /></div>
    
    
        <div id="centercolumn"><img src="images/welcome-pic.gif" width="346" height="84" />
           <div class="blueline">&nbsp;</div>
           <div class="stomacher400">Stomacher&reg; 400 circulator</div>
           	<p class="stomacherdetails"><!-- TemplateBeginEditable name="stomacher400" -->Lorem ipm dolor sit amet, consectetur
    adipisc elit. Nullam eu magna at justo am
    fermentum. Lorem ipm dolor sit amet,
    consectetur adipisc elit. Lorem ipm dolor 
    adipisc elit. Nullam eu magna at justo am
    fermentum. Lorem ipm dolor sit amet,
    consectetur adipisc elit<!-- TemplateEndEditable -->&nbsp;<a href="">more ></a></p>
           <div class="blueline">&nbsp;</div>
           <div class="stomacher80">Stomacher&reg; 80 biomaster</div>
           	<p class="stomacherdetails"><!-- TemplateBeginEditable name="stomacher80" -->Lorem ipm dolor sit amet, consectetur
    adipisc elit. Nullam eu magna at justo am
    fermentum. Lorem ipm dolor sit amet,
    consectetur adipisc elit. Lorem ipm dolor 
    adipisc elit. Nullam eu magna at justo am
    fermentum. Lorem ipm dolor sit amet,
    consectetur adipisc elit<!-- TemplateEndEditable -->&nbsp;<a href="">more ></a></p>
           <div class="blueline">&nbsp;</div>
           <div class="stomacher3500">Stomacher&reg; 3500 series</div>
           	<p class="stomacherdetails"><!-- TemplateBeginEditable name="stomacher3500" -->Lorem ipm dolor sit amet, consectetur
    adipisc elit. Nullam eu magna at justo am
    fermentum. Lorem ipm dolor sit amet,
    consectetur adipisc elit. Lorem ipm dolor 
    adipisc elit. Nullam eu magna at justo am
    fermentum. Lorem ipm dolor sit amet,
    consectetur adipisc elit<!-- TemplateEndEditable -->&nbsp;<a href="">more ></a></p>
        </div>
      </div>
    
    <div id="leftside">
        <img src="images/side-square-image.jpg" alt="side image" width="291" height="218" border="0" />
        <ul>
        	<li>Latest News</li>
        </ul>
        <p>new news news news</p>
        <ul>
        	<li>Events</li>
        </ul>
        <p>new news news news</p>
        <ul>
        	<li>Offers</li>
        </ul>
        <p>new news news news</p>
        <div class="bluelineleft">&nbsp;</div>
        <p class="bottomlefttext">Seward has opened a brand new servies and logistics facility in the USA to support our <br /><span style="color:#0099fb">North American customers</span>&nbsp;&nbsp;<a href="#">more ></a><br />
          <br /><img src="images/usa-flag.gif" /><img src="images/german-flag.gif" /><img src="images/french-flag.gif" />
    </p>
      </div>
    
    
    
      <div id="footer"> wrapper</div>
    </div>
    </body>
    </html>
    css
    Code:
    body { background-color:#92acd7; font-family:Arial, Helvetica, sans-serif; }
    #wrapper { margin:0px auto; background-color:#FFFFFF; width:934px; border:#0099fb 1px solid; height:100%;  }
    #topflash { height:184px; }
    #leftside { width:291px; float:left; }
    #leftside p { font-size:14px; color:#999999; padding:0px 30px 0px 40px; }
    .bottomlefttext { font-size:14px; color:#999999; padding:0px 30px 0px 40px; line-height:20px;}
    #leftside li { list-style-image:url(../images/purplesquare.gif); color:#0099fb; font-size:16px; }
    #maincontent { width:643px; background-color:#cce6ff; height:100%; margin-left:291px; float:right; }
    #navcontainer { width:643px; background-color:#cce6ff; height:100%; }
    #centercolumn { width:346px; }
    #rightcolumn { width:296px; float:right; }
    .bluelineleft { border-bottom:#3658a6 1px solid; height:1px; width:220px; margin:30px 0px 30px 40px; }
    .blueline { border-bottom:#3658a6 1px solid; height:1px; width:300px; margin:20px 0px 20px 22px; }
    .stomacher400 { margin-left:22px; width:300px; color:#8d3b7e; font-family:Arial, Helvetica, sans-serif; font-size:25px; }
    .stomacher80 { margin-left:22px; width:300px; color:#60bd9c; font-family:Arial, Helvetica, sans-serif; font-size:25px; }
    .stomacher3500 { margin-left:22px; width:300px; color:#395cab; font-family:Arial, Helvetica, sans-serif; font-size:25px; }
    .stomacherdetails { margin-left:22px; width:300px; color:#666666; font-size:14px; line-height:16px; }
    a { text-decoration:none; color:#8d3b7e; font-weight:bold; font-size:12px; }
    #footer { clear:both; }

    please help?!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Margins, paddings, and borders add to the space an element is using. Now do the math:
    Quote Originally Posted by jarv View Post
    Code:
    #wrapper { width:934px; }
    #leftside { width:291px; float:left; }
    #maincontent { width:643px; margin-left:291px; float:right; }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •