views:

473

answers:

3

I want the 2 columns to touch ie. remove the margins, how can I do this?

My code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>testing</TITLE>
  <!-- css --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css"&gt; 
<!-- js --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/utilities/utilities.js"&gt;&lt;/script&gt; 
<style>
.yui-b {
 background-color: #eeeeee;
}


</style>
 </HEAD>

 <BODY>
  <div id="doc3" class="yui-t1"> <!-- change class to change preset --> 
  <div id="hd">header</div> 

  <div id="bd"> 
       <div id="yui-main"> 
   <div class="yui-b">
    bd.main
    </div> 
       </div> 

    <div class="yui-b">bd.other</div>   
  </div> 

  <div id="ft">footer</div> 
 </div> 
 </BODY>
</HTML>
+1  A: 

Add a class to the right column and set margin-left to 0.

If that doesn't work you might have to increase the width by 1 or 2%. You can use firebug to check the applied styles and change them on the fly.

MattW.
didnt' work for me.
+1  A: 

Notice that you're using YUI (Yahoo UI).

Look for the YUI reset.css. Every browser has potentially different margin, padding, font-size defaults. You should really start every web app with a reset.css file like that to bring everything to a common denominator. Otherwise you might find you "fix" the issue, only for it to appear again when viewed from another machine / platform.

Should hopefully start you off with all block elements having no margins or padding and then you can rather add margins and padding back in where you need it.

Neil Fenwick
A: 

Notice that you're using YUI (Yahoo UI).