SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple 2 column browser problem...

    This works fine in Firefox, but in IE the "box" shifts below the left content, I'm trying to get them to sit right next to each other. Here's the page code.

    If anyone has ANY ideas I would really appreciate it.

    Thanks!

    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>
      	<title>Generic Title</title>
      	<style>
      		body {
      			background: #330000; 
      			margin: 0; 
      			text-align: center; 
      		}
      		#content {
      			width: 770px;
      			background: blue;
      		}
      		
      		#right_content {
      			margin-left: 220px;
      		}
      		
      		#left_content {
      			float: left;
      			width: 200px;
      		}
      		
      		#box {
      			width: 550px;
      			background: #FFFFFF;
      		}
      
      	</style>
      </head>
        <body>
      			<div id="content">
      			
      				<div id="left_content">
     					left text
      				</div>
      				<div id="right_content">
     					<div id="box">
     						right text
     					</div>
      				</div>
      		</div>
      	</body>
      </html>

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

    3 pixel jog in IE ? see FAQ

    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>
    <title>Generic Title</title>
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0px;/* no margins body */
    	padding:0px;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	
    	body{
    	background: #330000; 
    	}
    	
    	#content{
    	width:770px;
    	background:blue;
    	margin:0 auto 0 auto;
    	}
    
    	#right-content {
    	margin-left:220px;
    	}
    
    	#left-content {
    	float:left;
    	width:200px;
    	}
    
    	#box{
    	width:550px;
    	background: #FFFFFF;
    	}
    	
    	* html #box{width:547px;}
    	
    	.fcl{clear:both;height:1px;overflow:hidden;/*margin-top:-1px;*/}
    	
    	</style>
    </head>
    <body>
    <div id="content">
    
    <div id="left-content">left text</div>
    
    <div id="right-content">
    <div id="box">right text</div>
    </div>
    <div class="fcl"></div>
    
    </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What happens if box is an image with a width of 550px?


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
  •