layout floating issue [Archive]

mgdc

02-22-2008, 11:06 PM

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

abduraooft

02-23-2008, 10:42 AM

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 ;))
<!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%;
}
#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>