SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Udine - Italy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question two colums layout using floats = IE troubles

    I am trying this:

    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=iso-8859-1" />
    <title>Two colums float</title>
    
    <style type="text/css">
    
    .wrapper {
    	width: 358px;
    	text-align: center;
    	font: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    .text {
    	position: relative;
    	background-color: #ffc;
    	padding: 9px 14px;
    	text-align: justify;
    	border: 1px solid black;
    }
    
    #col1 { width: 156px; float: left; border: 1px solid red; }
    #col2 { width: 156px; float: right; border: 1px solid red; }
    
    .clearer {
    	clear: both;
    	height: 1px;
    	overflow: hidden;
    	margin-top: -1px; 
    }
    
    
    </style>
    </head>
    <body>
    <div class="wrapper">
    			<div class="text">
    				<div id="col1">
    					text one 
    				</div>
    				<div id="col2">
    					text two
    				</div>
    				<div class="clearer"></div>
    			</div>
    </div>
    </body>
    </html>
    it works for firefox and opera but it fails in internet explorer.
    The background color disappears and there are layout troubles.

    I can fix by removing the position: relative to the container box .text, but I don't think thi s is the right solution and further more I need it.

    How can I fix it? Very strange problem

    Thanks a lot for any help about it

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Your .text box has no layout, width or height, or the haslayout problem in IE
    see FAQ CSS

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Two colums float</title>
    	<style type="text/css">
    	
    	*{padding:0;margin:0;}
    	
    	body{font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	}
    	
    	head+/**/body .fc:after{
    	content:".";
    	display:block;
    	height:0px;
    	clear:both;
    	visibility:hidden;
    	}
    	
    	/* mac hide \*/
    	* html .fc{height:1%;}
    
    	/* End hide */
    
    	.wrapper {width:358px;}
    	
    	.text{
    	background:#ffc;
    	padding:9px 14px;
    	text-align: justify;
    	border: 1px solid black;
    	}
    
    	#col1,#col2{width:156px;border:1px solid red; }
    	#col1{float:left;}
    	#col2 {float: right; }
    
    	.wrapper p{padding:5px;}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	*+html .fc{zoom:1;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    <div class="wrapper">
    
    <div class="text fc">
    
    <div id="col1"><p>text one </p></div>
    <div id="col2"><p>text two</p></div>
    
    </div>
    
    </div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2004
    Location
    Udine - Italy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that solves! Thanks a lot!

    I was missing width because I am also using padding... now that I know about this issue it will be easier to understand and fix.

    thanks

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good lord all4nerds - unload with both barrels on the IE hacks much?

    That's some SERIOUS run for the hills...

    Code:
    * {
      margin:0px;
      padding:0px;
    }
    
    .wrapper {
      width:358px;
      text-align:center;
      font:Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      line-height:13px;
    }
    
    .text {
      background-color:#FFFFCC;
      padding:9px 14px;
      text-align:justify;
      border:1px solid black;
    }
    
    #col1, #col2 { 
      width:156px;
      border:1px solid red;
      margin-bottom:1px;
      padding-bottom:-1px;
    }
    
    #col1 {
      float:left;
    }
    
    #col2 {
      float:right;
    }
    
    .clearer {
      clear:both;
    }
    using ONE fix, the -1/+1 margin/padding trick to make IE draw the bottom border.

    Talk about overthinking solutions to a problem...

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yeh not the same in IE , and looks great in FF NS Moz Op

    PS you changed your code ,the clear div must go Please


Bookmarks

Posting Permissions

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