471,618 Members | 1,156 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,618 software developers and data experts.

simple BOX MODEL Layout

realin
254 100+
hello guys,

I am just unable to make a simple 2 Box model layout layout work perfect on the browsers IE and ffx. My resulting webpage responds variably on either of them..

The problem is that but the IE shows a margin of 20px and ffx shows a margin of 10px from right..

the main box is container containing another box right. and the code for the same is here
[html]
<!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>
<style type="text/css" >
.container{
background:url(./ask/img/bg_grad.gif);
background-repeat:repeat-y;
border:1px solid #e0e0e0;
padding:0px;
margin:0px 100px 0px 100px;
width:825px;
border:1px solid red;
height:1000px;
}

.right{

float:right;
background:#ffffff url('./ask/img/content.gif') no-repeat top right;
border-left:2px solid #e0e0e0;
width:190px;
border:1px solid red;
margin:0px 10px 10px 0px;
padding:30px 10px 10px 10px;
height:2000px;
}

</style>
</head>

<body>
<div class='container'>
<div class='right'></div>

</div>

</body></html>[/html]

I have given the heights here just to see the elements .. but in actual page i am using JS to make the heights equal..
Oct 16 '07 #1
1 1750
drhowarddrfine
7,435 Expert 4TB
As always, the problem again is IE.

One thing to always remember is that floated elements are removed from the normal flow. So any parent element that contains them will collapse to contain the next positioned element that is not floated or absolutely positioned. And that is what is happening with your .container div in Firefox, which is performing correctly.

IE, on the other hand, is showing one of its major bugs by expanding the containing element to contain those floats which, as I mentioned, is not supposed to happen.

To get modern browsers, like Firefox, Opera and Safari, to do what you want, you want to tell the containing div to expand to contain this content that is "overflowing" out of it. So, in your css for .content, add 'overflow:auto'.

Now, just a quick glance shows me there will be a scrollbar created but this may have to do with a height for something there or margins, but I don't have time to look right now.
Oct 16 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

13 posts views Thread by Droolboy | last post: by
1 post views Thread by Dario de Judicibus | last post: by
13 posts views Thread by Stephen Poley | last post: by
3 posts views Thread by Robert Mark Bram | last post: by
3 posts views Thread by KevinD | last post: by
10 posts views Thread by sumsin | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.