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
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layout floating issue

    Hello,

    I am attempting to do a layout where I have two blocks on the right of different widths, and have the body on the right wrap around them both. An example of what I'm trying is here:

    http://myuid.com/~kevin/exp.html

    It seemed to be working, but when I went to add a float in the body on the left, it is getting cleared by the blue div on the right (so it gets pushed under the red one). The blue div only has clear: right so I thought it would not clear things in the body to the left, but I seem to be wrong. I need to be able to have floats in the left for inline images and et cetera.

    Anyone have any ideas on how I can fix this?

    (By the way, for some reason it works in IE7, I am running into the problem in gecko, webkit, and opera).

    Thanks!
    kevin

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Ah.. a tough one! Created a demo, so far OK, but when i apply float to li, problem begins.
    Experts...... Have a look at this and help him (me too )
    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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *{
    margin:0;
    padding:0;
    }
    html,body{
    height:100&#37;;
    }
    #wrap{
    height:100%;
    width:800px;
    margin:0 auto;
    position:relative;
    }
    #right1{
    float:right;
    right:0;
    width:300px;
    height:300px;
    border:1px solid #000;
    
    }
    #right2{
    float:right;
    width:200px;
    height:200px;
    border:1px solid #00f;
    clear:both;
    }
    ul{
    
    }
    ul li{
    border:1px solid #0f0;
    width:50px;
    /*float:left;*/
    }
    h1{
    margin-bottom:10px;
    margin-top:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrap">
    	
    	
    	
    	<div id="right1"></div>
    	
    	<div id="right2"></div>
    	<h1>Head</h1>
    	<ul>
    		<li>A</li>
    		<li>B</li>
    		<li>C</li>
    	</ul> 
    	
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    	 Nulla ut eros non eros convallis fringilla. Cras mollis,
    	  nulla faucibus scelerisque suscipit, pede magna rhoncus ipsum,
    	  
    	  </p>
    	
    </div>
    </body>
    </html>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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