469,313 Members | 2,584 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,313 developers. It's quick & easy.

css-p: div problem

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

..menuBackground {
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;
}

..lighterBackground {
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;
}

Jun 25 '07 #1
1 2069
ne********@yahoo.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
Jun 25 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Jocab | last post: by
145 posts views Thread by Mark Johnson | last post: by
36 posts views Thread by Peter Brause | last post: by
20 posts views Thread by Tammy | last post: by
30 posts views Thread by Diane Wilson | last post: by
77 posts views Thread by VK | last post: by
1 post views Thread by shapper | last post: by
11 posts views Thread by New Bee | last post: by
1 post views Thread by fpimentel | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.