Welcome to WebmasterWorld Guest from 54.161.73.123

Forum Moderators: not2easy

Message Too Old, No Replies

DIV floated left and DIV floated right.

FF Shoves right DIV below left DIV

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

Preferred Member

10+ Year Member

joined:Aug 12, 2005
posts:411
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 0


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)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 988
votes: 31


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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members