CSS floating sidebar -- Mozilla/IE problem, urgent

Okay, here's the bottom line:

For some upcoming projects, I need to figure out how to wrap text around sidebars (sidebars might contain swfs, text, or images, but that's not relevant).

In a nutshell, here's what I've got going:

1. A position:absolute; DIV as the "wrapper," within which the main text happens;
2. A sidebar, with position:relative; nested within the main DIV
3. clear:both, for good measure

Here's what happens: in IE, the sidebar DIV DOES show up and the text in the main DIV does wrap around it.  That's great.  However, actual vertical positioning on the page is off (does not work at all with relative position).  On mozilla/Firefox, a "hole" is cut out for the nested div, the text wraps...but the DIV floats out elsewhere on the page.  
Here's the page to check out: http://www.highdudgeon.net/index.html

Here's the "wrapper"
#left
{
position:absolute;
float:left;
top: 75px;
left: 0px;
width: 240px;
height: 500px;
padding-left:5px;
padding-right:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-color: #000;
background-color:#E9E8E8;
border-style:solid;
border-right-width:2px;
border-top-width:0px;
border-left-width:0px;
border-right-color:#666;
border-bottom-width:2px;
border-bottom-color:#666;
}

And the "sidebar"

#insettext
{
position:relative;
float:right;
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
text-align:left;
top:250px;
left:125px;
height:125px;
width:100px;
background-color:#FFF;
border-style:solid;
border-right-width:1px;
border-top-width:1px;
border-left-width:1px;
border-bottom-width:1px;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
overflow:hidden;
}

But check out the site in those browsers.  Also, note that the top and bottom margines, in IE, are quite exaggerated.  Help!
geod100Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
You messed up the float by specifying position.  You can't do both because they contradict each other:

#insettext
{
float:right;
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
text-align:left;
height:125px;
width:100px;
background-color:#FFF;
border-style:solid;
border-right-width:1px;
border-top-width:1px;
border-left-width:1px;
border-bottom-width:1px;
padding-left:5px;
padding-right:5px;
padding-bottom:0px;
overflow:hidden;
}



Cd&
0
geod100Author Commented:
Specifying a position contradicts a float?  You can stack absolutely positioned floats all day long.  The issue here, of course, is a float inside a div...but, even then, I need to specify the precise vertical location on the page.

Having said that, the above does not fix the Mozilla problem -- absolutely no change.
0
geod100Author Commented:
Whoops -- my bad, I changed the wrong div name.  

Okay, it does work, so we're much closer now -- thank you!  The issue remains, however, that I do need to specify an absolute vertical position for this thing (in short, I need a top:Xpx;).  

Your method works, but it requires setting the sidebar in the actual text for placement -- which is far from precise and not really elegant.

Thoughts?  And, thanks for your help.  And, yes, I remember my COBOL!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

neesterCommented:
> geod100

Sorry I haven't had time to review your code.
Although I think it is important to say that Abolute positioned elements usually cause problems somewhere.
I can't really think of anything except popup divs, where you would need Absolute positioning.

Why doesn't it work with relative positioning?

Whenever I float something and want text to wrap around it, I do this:(inline coding just to make it simple for me to type up)

<div style="clear: both; padding: 10px;">
<div style="float: left; width: 200px; margin: 10px 10px 5px 15px;">
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR SIDE BAR
</div>
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT WRAPPING CONTENT
</div>
0
seanpowellCommented:
>>Your method works, but it requires setting the sidebar in the actual text for placement -- which is far from precise and not really elegant

Precision is for print - Cd&'s comment is your only option. You either float the internal div or position it because float takes up space in the layout, and positioning doesn't.

One other note, your code is a little mixed up. Doctype at the top, okay?:

<html>
<head>
<title>High Dudgeon: Production and Miscellany</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" href="hd.css" type="text/css">
</head>

should be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>High Dudgeon: Production and Miscellany</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="hd.css" type="text/css">
</head>

Thanks,
Sean
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
>>>I need to specify the precise vertical location on the page.
>>>which is far from precise and not really elegant.

Are you doing a magazine page or a web page.  If you want more precision  then do what the old time typesetters did.  Position each word precisly where you want it.  If somethig is not quite right adjust the point sizes fractionaly; modify the kerning, and customize the font.  Then inssist that every user of the page only be allowed to view the page with the specific browser, OS, resolution, screen size and preference settings.  Then if there is not more a a 3% variance in the voltage to their computer they will see "precisely"  what you want them to see.

Of course you always have the option to use a graphic for the whole thing.

Do you not understand that the only users who are going to see it the way you do are those with an identical setup?  Some users are going to use larger fonts; some smaller?  Control of a web page by the developer is an illusion.  The user has control all you can do it give the browser a good set of instructions that allows it to do an acceptable presentation no matter what the user does to screw it up.

Cd&
0
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A. :^)

Cd&
0
geod100Author Commented:
Well...I'm not sure whether or not the above was sarcasm.  Of course I understand that control over a web page isn't precise.  But, within a great amount of reason, it's possible to get things to look right.  All I wanted to do was to position a side bar with a vertical positioning specification.  Hell, one easy way to do that is simply to use DIVs for each piece -- side bar, top, bottom and sides.  I was just looking for a more elegant way of getting it done, rather than using a text insertion and very, very loose guesstimate.

You pointed out, above, that absolute placement and the float were clashing -- had I bothered to think things through for a bit longer, based on my experiments, that would have been obvious.

Having said that, whatever flaws this little personal project might have, I have managed large-scale print and, yes, web development projects that ran into the hundreds of thousands of dollars.  Mind you, as a manager -- not as a direct developer.  Oh, and before that, I managed print production for years, so I do know a thing or two about that field.
0
COBOLdinosaurCommented:
It was not sarcasm.  Every week in these topics we get developer going over the edge because they are not getting pixel exact placement or they are upset because a user chnge the font size to 125% and messed up the layout they has spent weeks get absolutley perfectly positioned.

More than half the members who come to the CSS topic do not have a good understanding of it or how to use it; many are still mired in 20th century layout methods.  We like to think that everyone leaves a little more knoledgable about CSS.  Both Sean and I spend a great deal of time teaching well beyond what is required to answer questions.

So if you took it as sarcasm, and wer offended, I sincerly appologize.  I look a profiles and try and communicate at a level suited to the members skill set, and background.  You have nothing in your profile so I could only go by the content of the thread, and you came across to me as an earnest you developer learning on the fly and trying to impress your boss. Sorry if that resulted in me appearing to talk down to you.

Cd&
0
geod100Author Commented:
No problems, and thanks -- too easy to get irritated over email.  I really appreciate your help -- and, yes, I am somewhat mired in old ways.
0
seanpowellCommented:
Just got back from a busy weekend...
Sorry Cd& - my comment was just backing up your initial post, I hadn't meant to take points for it :-(

geod100, thanks very much for your reply's. Good two-way communication is what makes us enjoy what we do here.

Sean
0
COBOLdinosaurCommented:
Sean, NP.  It evens out over time.  Won't matter until they start taking EE points at the Beer Store; then it gets important. ;^)

Cd&
0
geod100Author Commented:
Hey, I worked at the Evil Empire, AKA Microsoft, for years (as a writer and manager)-- I know all about miscommunication and feel terrible for having misinterprested CD's.

You guys rock.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.