?
Solved

CSS floating sidebar -- Mozilla/IE problem, urgent

Posted on 2004-11-13
13
Medium Priority
?
1,142 Views
Last Modified: 2008-03-10
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!
0
Comment
Question by:geod100
  • 5
  • 5
  • 2
  • +1
13 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 1200 total points
ID: 12576487
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
 

Author Comment

by:geod100
ID: 12576611
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
 

Author Comment

by:geod100
ID: 12576622
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:neester
ID: 12576630
> 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
 
LVL 31

Accepted Solution

by:
seanpowell earned 800 total points
ID: 12578283
>>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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12579046
>>>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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12579058
Glad we could help.  Thanks for the A. :^)

Cd&
0
 

Author Comment

by:geod100
ID: 12579939
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12580133
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
 

Author Comment

by:geod100
ID: 12580272
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12583479
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12584680
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
 

Author Comment

by:geod100
ID: 12585240
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month13 days, 15 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question