...

View Full Version : 2 columns not in line?!



jarv
05-28-2009, 09:56 AM
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?!



<!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


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?!

VIPStephan
05-28-2009, 10:00 AM
Margins, paddings, and borders add to the space an element is using. Now do the math:




#wrapper { width:934px; }
#leftside { width:291px; float:left; }
#maincontent { width:643px; margin-left:291px; float:right; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum