473,241 Members | 1,619 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 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 1815
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

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

Similar topics

13
by: Droolboy | last post by:
I'm trying to build a fairly small (max. 10 different pages) site using php, and it's becoming obvious that I need some kind of model view separation. Having done a few searches, I've come...
1
by: Dario de Judicibus | last post by:
I wish to create two simple layouts by using only HTML, CSS and the minimum JavaScript as possible. Layouts should be "elastic" (no fixed widths and heights) and cross-browser enabled. The first...
13
by: Stephen Poley | last post by:
Good advice is frequently given in c.i.w.a.* on page structure: matters such as separation of content from presentation, graceful degradation, non-dependence on Flash etc. For some while I've...
4
by: Geoff Hague | last post by:
I've decided I need to rebuild my website from scratch to work properly accross browsers (the previous version of the site worked fine in IE6, but was really wonky in other browsers). What I'm...
3
by: Robert Mark Bram | last post by:
Hi All! In the code below, I want to add a handler to a *row* (eventually so I can change the style of a row), but the event is being generated by the TD's it seems - in Opera and IE. Is there...
3
by: KevinD | last post by:
thank you for your helpful explanations. In my first note I forgot to mention that my simple flatfile is a text file with a newline character at the end thus I able to get an entire record . ...
50
by: Shadow Lynx | last post by:
Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>...
3
by: Rangy | last post by:
Hi, I've decided to take the plunge and move from tables to a pure css layout. I still "think" in tables when I do my layouts and I was wondering the following: I have a simple, standard two...
10
by: sumsin | last post by:
The C++ Object Model book says that 'Nonstatic data members are allocated directly within each class object. Static data members are stored outside the individual class object. Static and...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.