How can I get Opera and Firefox to show a border with a <div>?

How can I get Opera and Firefox to show a border with a <div> for the
page below?

<http://mark4asp.freehostingnow.com/DealFlow.html>

The content of the <div> with a class="DealFlowContainer" is shown
outside, below the div. Why is that and what can I do to ensure that
all the content inside the div is surrounded by the border of the
containing div? PS: You can see the effect I want by viewing it in
IE.

What should I be doing here?

Here are the relevant class definitions for the html:

..DealFlowContainer
{
border: 2px solid #7e93c6;
margin: 6px 0px 0px 0px;
width:990px;
}
..DealFlowBanner
{
padding:5px;
font-weight:bold;
font-size:1.3em;
background:#7e93c6;
margin:0px 0px 1px 0px;
color:white;
}
..DealFlowBlurb
{
float:left;
width:550px;
padding:5px;
font-size:12px;
}
..DealFlowImageContainer
{
float:left;
width:250px;
padding-left:70px;
padding-bottom:20px;
padding-top:20px;
}
..Link
{
float:left;
clear:both;
background:#D8DEEE;
color:Black;
font-size:7.5pt;
padding-top:2px;
padding-bottom:2px;
padding-left:10px;
padding-right:10px;
margin-left:10px;
text-decoration:none;
border:solid 1px black;
}
..Link A
{
text-decoration:none;
color:Black;
}
..Link A:hover
{
text-decoration:none;
color:Black;
}
..Link A:visited
{
text-decoration:none;
color:Black;
}
..LinkDescription
{
float:left;
clear:left;
width:400px;
font-size:12px;
background:White;
padding:5px;
margin-left:30px;
margin-bottom:20px;
color:Black;
}

mark4asp wrote:

How can I get Opera and Firefox to show a border with a <div> for the
page below?

http://mark4asp.freehostingnow.com/DealFlow.html

The content of the <div> with a class="DealFlowContainer" is shown
outside, below the div. Why is that and what can I do to ensure that
all the content inside the div is surrounded by the border of the
containing div? PS: You can see the effect I want by viewing it in
IE.

IE is doing it wrong. The only content inside the DealFlowContainer div

below the DealFlowBlurb div are the DealFlowBanner and
DealFlowImageContainer divs, and they both float. Content inside a div
that contains floats wraps around the floats, but the floats themselves
are outside the flow of the containing div and don't contribute to its
dimensions. In this case, since I believe the DealFlowBlurb will always
be higher than the image, make the image container float right, and
position the blurb after it and don't have it float at all.

Harlan Messinger wrote:

mark4asp wrote:
How can I get Opera and Firefox to show a border with a <div> for the
page below?

http://mark4asp.freehostingnow.com/DealFlow.html

The content of the <div> with a class="DealFlowContainer" is shown
outside, below the div. Why is that and what can I do to ensure that
all the content inside the div is surrounded by the border of the
containing div? PS: You can see the effect I want by viewing it in
IE.

IE is doing it wrong. The only content inside the DealFlowContainer div
below the DealFlowBlurb div are the DealFlowBanner and
DealFlowImageContainer divs, and they both float. Content inside a div
that contains floats wraps around the floats, but the floats themselves
are outside the flow of the containing div and don't contribute to its
dimensions. In this case, since I believe the DealFlowBlurb will always
be higher than the image, make the image container float right, and
position the blurb after it and don't have it float at all.

Else include a clearing div.

--
Gus

mark4asp wrote:

How can I get Opera and Firefox to show a border with a <div> for the
page below?

http://mark4asp.freehostingnow.com/DealFlow.html

The content of the <div> with a class="DealFlowContainer" is shown
outside, below the div. Why is that and what can I do to ensure that
all the content inside the div is surrounded by the border of the
containing div? PS: You can see the effect I want by viewing it in
IE.

Because IE got it wrong! Floats are not supposed to be "contained" by
parent elements in normal flow. The easiest way to get what you wish is
to change the overflow property on the container

What should I be doing here?

Here are the relevant class definitions for the html:

.DealFlowContainer
{
border: 2px solid #7e93c6;
margin: 6px 0px 0px 0px;
width:990px;
/* add this next line */

overflow: hidden;

}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 24 Oct, 13:06, Harlan Messinger <hmessinger.removet... (AT) comcast (DOT) net>
wrote:

mark4asp wrote:
How can I get Opera and Firefox to show a border with a <div> for the
page below?

http://mark4asp.freehostingnow.com/DealFlow.html

The content of the <div> with a class="DealFlowContainer" is shown
outside, below the div. Why is that and what can I do to ensure that
all the content inside the div is surrounded by the border of the
containing div? PS: You can see the effect I want by viewing it in
IE.

IE is doing it wrong. The only content inside the DealFlowContainer div
below the DealFlowBlurb div are the DealFlowBanner and
DealFlowImageContainer divs, and they both float. Content inside a div
that contains floats wraps around the floats, but the floats themselves
are outside the flow of the containing div and don't contribute to its
dimensions. In this case, since I believe the DealFlowBlurb will always
be higher than the image, make the image container float right, and
position the blurb after it and don't have it float at all.

Thanks for the advice. It wasn't quite as easy as you suggested. The
DealFlowImageContainer div had to completely go and the class given to
the image contained within (otherwise IE gets it wrong). The div with
the Link class becomes a span. All the floats go apart from the image
which floats right as you said. Some of the margins then need slight
adjustments. Now it looks the same in IE, Opera and Firefox.

On 24 Oct, 15:16, "Jonathan N. Little" <lws4... (AT) centralva (DOT) net> wrote:

mark4asp wrote:
How can I get Opera and Firefox to show a border with a <div> for the
page below?

http://mark4asp.freehostingnow.com/DealFlow.html

The content of the <div> with a class="DealFlowContainer" is shown
outside, below the div. Why is that and what can I do to ensure that
all the content inside the div is surrounded by the border of the
containing div? PS: You can see the effect I want by viewing it in
IE.

Because IE got it wrong! Floats are not supposed to be "contained" by
parent elements in normal flow. The easiest way to get what you wish is
to change the overflow property on the container



What should I be doing here?

Here are the relevant class definitions for the html:

.DealFlowContainer
{
border: 2px solid #7e93c6;
margin: 6px 0px 0px 0px;
width:990px;

/* add this next line */
overflow: hidden;

}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Aaaaaaah, too late. I've already fixed according to Harlan's advice. I
had to change quite a bit too. Works OK now. Thanks.