css-p: div problem

[newcomer2k@yahoo.com]

Hi experts,
I used 2 divs (side-bar and main-copy) and tried to line them side by
side.
For the most part this works fine. Both divs appear at the same y-
value on the screen.
However, as I decreased the width of my IE window,
just when the browser's horizontal scrollbar appears, the right div
got shifted down by the height of the left div. i.e. the right div's
top equal to the left div's bottom. If I increased the browser's
width then the right div will float right back to where it should be.

Please help.
Minh

CSS file:
/*************** *************** *******
* TITLE: Sinorca Screen Stylesheet *
* URI : sinorca/sinorca-screen.css *
* MODIF: 2003-Apr-30 19:31 +0800 *
*************** *************** *******/


/* ##### Common Styles ##### */

body {
color: black;
background-color: rgb(240,240,240 );
font-family: verdana, helvetica, arial, sans-serif;
font-size: 71%; /* Enables font size scaling in MSIE */
margin: 0;
padding: 0;
}

html body {
font-size: 8.5pt;
}

acronym, .titleTip {
border-bottom: 1px dotted rgb(153,153,153 );
cursor: help;
margin: 0;
padding: 0 0 0.4px 0;
}

..doNotDisplay {
display: none;
}

..Error {
background-color: red;
font-weight: bold;
margin: 3em 0 0 0;
padding: 0.5ex 0 0.5ex 1ex;
}

..smallCaps {
font-size: 110%;
font-variant: small-caps;
}


/* ##### Header ##### */

..superHeader {
color: white;
background-color: rgb(100,135,220 );
height: 2em;
}

..superHeader a {
color: white;
background-color: transparent;
text-decoration: none;
font-size: 91%;
margin: 0;
padding: 0 0.5ex 0 0.25ex;
}

..superHeader a:hover {
text-decoration: underline;
}

..superHeader .left {
position: absolute;
left: 1.5mm;
top: 0.75ex;
}

..superHeader .right {
position: absolute;
right: 1.5mm;
top: 0.75ex;
}

..midHeader {
color: rgb(39,78,144);
background-color: rgb(140,170,230 );
}

..headerTitle {
font-size: 337%;
font-weight: normal;
margin: 0 0 0 4mm;
padding: 0.25ex 0;
}

..menuBackgroun d {
background-color: rgb(0,51,153);
}

..subHeader {
color: white;
background-color: transparent;
margin: 0;
padding: 1ex 1ex 1ex 1.5mm;
}

..subHeader a {
color: white;
background-color: transparent;
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0 0.75ex 0 0.5ex;
}

..subHeader a:hover {
text-decoration: underline;
}

..superHeader .highlight, .subHeader .highlight {
color: rgb(253,160,91) ;
background-color: transparent;
}


/* ##### Side Bar ##### */

#side-bar
{
width: 15em;
float: left;
clear: left;
/*border-right: 1px solid rgb(153,153,153 );*/
background-color: yellow;
}

#side-bar div {
/*border-bottom: 1px solid rgb(153,153,153 );*/
}

..sideBarTitle {
font-weight: bold;
margin: 0 0 0.5em 2.5mm;
padding: 1em 0 0 0;
}

#side-bar ul {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0 0 1.1em 0;
}

#side-bar li {
margin: 0;
padding: 0.1ex 0; /* Circumvents a rendering bug (?) in MSIE 6.0 */
}

#side-bar a, .thisPage {
color: rgb(0,102,204);
background-color: transparent;
text-decoration: none;
margin: 0;
padding: 0.75em 1ex 0.75em 5mm;
display: block;
}

..thisPage {
color: black;
background-color: white;
padding-left: 4mm;
border-top: 1px solid rgb(153,153,153 );
border-bottom: 1px solid rgb(153,153,153 );
}

#side-bar a:hover {
color: white;
background-color: rgb(100,135,220 );
text-decoration: underline;
font-weight: bold;
}

..sideBarText {
line-height: 1.5em;
margin: 0 0 1em 0;
padding: 0 1.5ex 0 2.5mm;
display: block;
}

#side-bar .sideBarText a {
text-decoration: underline;
margin: 0;
padding: 0;
display: inline;
}

#side-bar .sideBarText a:hover {
color: rgb(0,102,204);
background-color: transparent;
text-decoration: none;
}

..lighterBackgr ound {
color: inherit;
background-color: white;
}


/* ##### Main Copy ##### */

#main-copy
{
color: black;
background-color: green;
text-align: justify;
line-height: 1.5em;
margin: 0 0 0 15em;
/*padding: 1mm 1mm 1mm 1mm;*/
border-left: 1px solid rgb(153,153,153 );
height: 480px;
}

#main-copy p {
margin: 1em 1ex 2em 1ex;
padding: 0;
}

#main-copy a {
color: rgb(0,102,204);
background-color: transparent;
text-decoration: underline;
}

#main-copy a:hover {
text-decoration: none;
}

#main-copy h1 {
color: white;
background-color: rgb(100,135,220 );
font-size: 100%;
font-weight: bold;
margin: 3em 0 0 0;
padding: 0.5ex 0 0.5ex 1ex;
}

#main-copy label {
color: white;
background-color: rgb(100,135,220 );
font-weight: bold;
margin: 3em 0 0 0;
padding: 0.5ex 0 0.5ex 1ex;
}

#main-copy .topOfPage {
color: white;
background-color: transparent;
font-size: 91%;
font-weight: bold;
text-decoration: none;
margin: 2.5ex 1ex 0 0; /* For MSIE */
padding: 0;
float: right;
}

#main-copy .topOfPage {
margin: 2.75ex 1ex 0 0; /* For fully standards-compliant user
agents */
}

dl {
margin: 1em 1ex 2em 1ex;
padding: 0;
}

dt {
font-weight: bold;
margin: 0 0 0 0;
padding: 0;
}

dd {
margin: 0 0 2em 2em;
padding: 0;
}


/* ##### Footer ##### */

#footer {
color: white;
background-color: rgb(100,135,220 );
font-size: 91%;
margin: 0;
padding: 0.5em 2.5mm 0.5ex 2.5mm;
clear: both;
}

#footer .left {
/*line-height: 1.45em;*/
float: left;
clear: left;
}

#footer .right {
text-align: right;
/*line-height: 1.45em;*/
}

#footer a {
color: white;
background-color: transparent;
text-decoration: underline;
}

#footer a:hover {
text-decoration: none;
}

[John Hosking]

Re: css-p: div problem

newcomer2k@yaho o.com wrote:

Hi experts,

Ha! Sorry, they're all busy. But I'm here... ;-)

I used 2 divs (side-bar and main-copy) and tried to line them side by
side.
For the most part this works fine. Both divs appear at the same y-
value on the screen.
However, as I decreased the width of my IE window,
just when the browser's horizontal scrollbar appears, the right div
got shifted down by the height of the left div. i.e. the right div's
top equal to the left div's bottom. If I increased the browser's
width then the right div will float right back to where it should be.

I predict, without having gone to the URL you will be providing below,
that your divs (or at least, the "right div") will be floated left, and
that the behavior is therefore as designed. That is, floats are supposed
to do that (hence the name).

What else do you want to happen with two side-by-side blocks which lack
the room for their combined width? (Not a rhetorical question; you have
to think about this.)

>
CSS file:

No, this is where you provide the URL, from which we can see all of the
CSS you posted below, plus the CSS you didn't post, plus the markup
you're using, plus the doctype, plus the way your server is serving it.

body {
color: black;
background-color: rgb(240,240,240 );
font-family: verdana, helvetica, arial, sans-serif;
font-size: 71%; /* Enables font size scaling in MSIE */

Yes, it does, sort of (that is, compared to using pixels or points).
However, it pretty much *mandates* font size scaling in MSIE, as well as
in other visual browsers, because 71% is about 30% smaller than I want
to see your page at.

margin: 0;
padding: 0;
}
>
html body {
font-size: 8.5pt;
}

Do you know what IE7 will do with the above? (Hint: see
http://msdn2.microsoft.com/en-us/library/bb250496.aspx) Is it what you
planned? And what is it you expect from 8.5pt in any browser?
(Personally, I will be squinting or surfing away.)

>
#side-bar
{
width: 15em;
float: left;
clear: left;
/*border-right: 1px solid rgb(153,153,153 );*/
background-color: yellow;
}
>
#side-bar div {
/*border-bottom: 1px solid rgb(153,153,153 );*/
}

I personally guarantee that there is no usefulness in posting
commented-out CSS rules in a NG.

#main-copy
{
color: black;
background-color: green;
text-align: justify;
line-height: 1.5em;
margin: 0 0 0 15em;
/*padding: 1mm 1mm 1mm 1mm;*/
border-left: 1px solid rgb(153,153,153 );
height: 480px;
}
>
#main-copy p {
margin: 1em 1ex 2em 1ex;
padding: 0;
}
>

#main-copy .topOfPage {
color: white;
background-color: transparent;
font-size: 91%;
font-weight: bold;
text-decoration: none;
margin: 2.5ex 1ex 0 0; /* For MSIE */
padding: 0;
float: right;
}
>
#main-copy .topOfPage {
margin: 2.75ex 1ex 0 0; /* For fully standards-compliant user
agents */
}

And then there's IE7. How does that fit the above two rules and their
comments?

Without the markup, your CSS can't provide the whole story. What is
..topOfPage? What contains #main-copy? And so on. If you still need help,
provide a URL with firther details.

HTH
--
John