Welcome to WebmasterWorld Guest from 54.146.180.94

Forum Moderators: not2easy

DIV floated left and DIV floated right.

FF Shoves right DIV below left DIV

   
6:07 am on Dec 22, 2006 (gmt 0)

5+ Year Member



Hello,

I have a large container with a variable width that has inside two DIVs. One with a specified width floated left, the other without a specified width floated right.

Ideally, I would like the two DIVs to be next to each other, as IE displays them. However, FF shoves the right DIV below, with a 100% width.

I would like the right DIV to have a variable width to take up what ever room the left DIV does not. I have even tried setting the right DIV to have an AUTO width, with no luck.

Any advice?

Thanks

code:
-------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
body{margin:10px auto;width:90%}

#a,#b,#c{border:4px solid #000;padding:10px}
#a{width:40%;float:left}
#b{float:right;margin-left:10px}
</style>
</head>

<body>

<div id="c">

<div id="a">
Proin non ipsum ultrices mauris bibendum lacinia. Duis eget libero. Curabitur imperdiet rhoncus mauris. Sed velit libero, ornare ut, vestibulum vel, auctor sit amet, purus. Vivamus eu quam sed pede fringilla lobortis. Vestibulum dictum nunc quis nulla. Maecenas consequat nisl sit amet lectus. Suspendisse justo neque, sodales non, tincidunt in, viverra eu, velit. Phasellus viverra aliquet lacus. Curabitur ac mi sed erat molestie hendrerit. Quisque in orci et odio rhoncus congue. Nulla vestibulum porttitor velit. Cras ut magna sed massa gravida eleifend. Quisque at nisl. Nam non velit in ipsum bibendum lacinia. Vivamus dapibus ante id nulla.
</div>

<div id="b">
Proin non ipsum ultrices mauris bibendum lacinia. Duis eget libero. Curabitur imperdiet rhoncus mauris. Sed velit libero, ornare ut, vestibulum vel, auctor sit amet, purus. Vivamus eu quam sed pede fringilla lobortis. Vestibulum dictum nunc quis nulla. Maecenas consequat nisl sit amet lectus. Suspendisse justo neque, sodales non, tincidunt in, viverra eu, velit. Phasellus viverra aliquet lacus. Curabitur ac mi sed erat molestie hendrerit. Quisque in orci et odio rhoncus congue. Nulla vestibulum porttitor velit. Cras ut magna sed massa gravida eleifend. Quisque at nisl. Nam non velit in ipsum bibendum lacinia. Vivamus dapibus ante id nulla.
</div>

<div style="clear:both"></div>

</div>

</body>
</html>

1:00 pm on Dec 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'll look it over more completely when I get a chance, but I'll lay odds your problem is the difference between the two box models [tjkdesign.com]
5:23 pm on Dec 22, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there Jeremy_H,

you can have problems when mixing absolute values with percentages.
I would suggest that you forget the borders for the inner divs.
Here is an example...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
body {
margin:10px auto;
width:90%;
}
#c {
border:3px double #999;
}
#a,#b,#c {
padding:1%;
}
#a {
width:40%;
float:left;
text-align:justify;
color:#666;
background-color:#fee;
}
#b {
margin-left:43%;
text-align:justify;
color:#666;
background-color:#eef;
}
#clear {
clear:both;
}
</style>

</head>
<body>

<div id="c">

<div id="a">
Proin non ipsum ultrices mauris bibendum lacinia. Duis eget libero. Curabitur imperdiet rhoncus mauris.
Sed velit libero, ornare ut, vestibulum vel, auctor sit amet, purus. Vivamus eu quam sed pede fringilla
lobortis. Vestibulum dictum nunc quis nulla. Maecenas consequat nisl sit amet lectus. Suspendisse justo
neque, sodales non, tincidunt in, viverra eu, velit. Phasellus viverra aliquet lacus. Curabitur ac mi sed
erat molestie hendrerit. Quisque in orci et odio rhoncus congue. Nulla vestibulum porttitor velit. Cras
ut magna sed massa gravida eleifend. Quisque at nisl. Nam non velit in ipsum bibendum lacinia. Vivamus
dapibus ante id nulla.
</div>

<div id="b">
Proin non ipsum ultrices mauris bibendum lacinia. Duis eget libero. Curabitur imperdiet rhoncus mauris.
Sed velit libero, ornare ut, vestibulum vel, auctor sit amet, purus. Vivamus eu quam sed pede fringilla
lobortis. Vestibulum dictum nunc quis nulla. Maecenas consequat nisl sit amet lectus. Suspendisse justo
neque, sodales non, tincidunt in, viverra eu, velit. Phasellus viverra aliquet lacus. Curabitur ac mi sed
erat molestie hendrerit. Quisque in orci et odio rhoncus congue. Nulla vestibulum porttitor velit. Cras
ut magna sed massa gravida eleifend. Quisque at nisl. Nam non velit in ipsum bibendum lacinia. Vivamus
dapibus ante id nulla.
</div>

<div id="clear"></div>

</div>

</body>
</html>

birdbrain

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month