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

Author

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

mark4asp

2007-10-24, 6:18 pm

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;
}

Harlan Messinger

2007-10-24, 6:18 pm

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.

Gus Richter

2007-10-24, 6:18 pm

Harlan Messinger wrote:
> mark4asp wrote:
> 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

Jonathan N. Little

2007-10-24, 6:18 pm

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

mark4asp

2007-10-24, 6:18 pm

On 24 Oct, 13:06, Harlan Messinger <hmessinger.removet...@comcast.net>
wrote:
> mark4asp wrote:
>
>
>
> 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.

mark4asp

2007-10-24, 6:18 pm

On 24 Oct, 15:16, "Jonathan N. Little" <lws4...@centralva.net> wrote:
> mark4asp wrote:
>
>
>
> 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
>
>
>
>
>
>
> /* 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.