homepage Welcome to WebmasterWorld Guest from 54.166.228.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
DIV floated left and DIV floated right.
FF Shoves right DIV below left DIV
Jeremy_H




msg:3196906
 6:07 am on Dec 22, 2006 (gmt 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>

 

cmarshall




msg:3197139
 1:00 pm on Dec 22, 2006 (gmt 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]

birdbrain




msg:3197408
 5:23 pm on Dec 22, 2006 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved