Forum Moderators: not2easy
<head>
<style>
div#one { border: 1px solid #f00; display: block; padding: 10px; margin-left: 16px; width: 250px; float: right; background-color: #eee; overflow: auto; }
div.two { border: 1px solid #0f0; overflow: auto; margin-bottom: 14px; background-color: #ee0; }
</style>
</head>
<body>
<div id="one">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
</body>
and a warm welcome to these forums. ;)
I would hazard a guess and say that your document requires something like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
birdbrain
I did initially have a strict doctype in there, but was aiming for a minimal example, guess I made it too minimal! Full code is now below.
Thanks also for the advice about divs, but I do think they're the best choice here, as I say the code I gave is far from the full code I'm using!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<head>
<style>
div#one { border: 1px solid #f00; display: block; padding: 10px; margin-left: 16px; width: 250px; float: right; background-color: #eee; overflow: auto; }
div.two { border: 1px solid #0f0; overflow: auto; margin-bottom: 14px; background-color: #ee0; width: auto; }
</style>
</head>
<body>
<div id="one">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
<div class="two">Hello</div>
</body>
</html>
If you view this in IE6 and FireFox, you should see what I'm talking about. Also images here for reference:
Firefox:
<snip>
IE:
<snip>
[edited by: swa66 at 11:04 am (utc) on May 5, 2009]
[edit reason] No personal URL allowed see ToS and forum charter [/edit]
To avoid hacks use position:relative on both divs and IE6 will correctly play ball because you've told it what flow processes the two divs are following.
Try to read a few of suzyuk's recent posts, such as this:
[webmasterworld.com...]
Add this to your style sheet, and don't read any further until after seeing it work:
* html div.two {height:1%}
Okay. MAGIC? Actually, no. A simple hack to fix a nightmare IE6 (and below) issue called "HasLayout" (doesn't work in IE7, that's another hack for another time).
If you are one of those people who just HAVE to know the hows and whys, google "haslayout" and go to the first result - which should be "On having layout — the concept of hasLayout in IE/Win" satzansatz.de. Be warned ... it is scary IE only mind stuff that twists you up like a pretzel and causes drool five minutes in.
Okay, well, it doesn't really matter if your current problem is now fixed anyway because your coding and approach to coding is a mess! You will constantly have issues like this and not know why because you have to get a little discipline. You are heading down a bad habit path of IE, quirks mode horror. But I'm here to help.
We begin.
CHANGE THIS: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
TO THIS:<html>
TWO HEADS BETTER THAN ONE?
<head>
<head>
CHANGE THIS: <style>
TO THIS: <style type="text/css">
WHERE IS THE MIME TYPE?! How can you have any pudding if you don't set your MIME TYPE?!
PLEASE, PLEASE PUT THIS IN THE HEAD SECTION:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Okay, this was just to illustrate that we haven't even gotten into the html markup yet and already your page is coded incorrectly and setup to fail once it gets more involved than a few text items. This is just as important for cross-browser layout as proper markup level techniques.
DIVS! It kills me.
I did this, too when I first started with CSS; now whenever I see it its like walking on tacks barefoot after just having loofahed.
There is no substitution or reason for anyone not using proper semantic markup. PERIOD.
A div is just an html placeholder that allows you to position on a page PROPER MARKED UP HTML TAGS and it is not a repository for un-tagged text.
Using divs instead of proper html text containing tags is sloppy and leads to eventual problems later, like blindness and hairy palms ...
...what? oh, um, I mean like limiting your selects, class and IDs, not styling your default p, h or ul/ol/dl tags, and even worse having professionals pointing at you and laughing.
You, are specifically literally tying up your id and class to always only ever be just exclusively used by nothing but a stinkin' div! Why?
Divs don't deserver the attention, they are small minded creatures!
CHANGE THIS: div#one TO THIS: #one
CHANGE THIS: div.two AND TO THIS: .two
LOSE THIS: "display:block"
ADD THIS TO .two: "overflow: hidden"
There now, you have no excuse but to correctly use something like this:
<h3 id="one">Hello</h3>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
The point is this. First issue is if you use IE only, quirks mode, non-standard, deprecated html code and un-semantic divitus markup (like I, also, did up until 2005)... expect the page to blow-up in modern browsers.
But, you say, it didn't ... It actually worked in FF but not IE6 ...
Ahh, but you didn't know about hasLayout did you? So be quiet until I'm finished - its for your own good, you know.
SECOND, even being totally standards compliant, spec valid html 4.01 strict doesn't excuse one from actually messing it up by using the wrong elements. Always assume you are messing it up somehow - 9 times out of 10, you are.
Will an element that "floats right", displays as a "block" and "auto overflows", permit a non-floated element to "wrap" around it?
Yes.
In IE?
Well, duh! No.
Because it triggers hasLayout.
Well, that is unless there is a height designated on the box other than "auto" or "0", or you used "zoom:1" somewhere, oh I don't know it all, read the damn article.
Me? I prefer to just slap on the hack -
* html div.two {height:1%}
So elegant in its simplicity, isn't it?
FYI, here is the hasLayout hack for IE7 (if necessary):
*:first-child+html .clearfix {min-height:1px}
I know ... don't ask.
Here is how the whole magilla should look:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p {margin:5px 0; padding:0}
h3 {margin:5px 0 ; padding:0}
#one { border: 1px solid #f00; padding: 10px; margin-left: 16px; width: 250px; float: right; background-color: #eee;}
.two { border: 1px solid #0f0;overflow: hidden; margin-bottom: 14px; background-color: #ee0; }
* html .two {height:1%}
</style>
</head>
<body>
<h3 id="one">Hello</h3>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
<p class="two">Hello</p>
</body>
</html>
dislay: inline;
We do all tend to post EXAMPLE code here in the forums, in fact we encourage it as it shows how actual elements don't matter. Divs are the best thing to use as a base for example scenarios to save default margins from interacting with whatever it is you're trying to narrow down when you're simplifying a scenario. Even I will tend to use divs for examples, though it doesn't necessarily mean that's how I would code the final page
anyway in the interests of keeping it fair, it is indeed
overflow: auto;It is also that which is making IE7 work not because it's complying but because
overflow: auto;*:first-child+html .clearfix {min-height:1px}
* html div.two {height:1%}
Some of us here are very familiar with hasLayout [webmasterworld.com], since we helped "discover" it, or at least reached some of the same conclusions at the same time as Ingo et al..
I am also fairly well known as not being a fan of parse hacks especially if used in a master style sheet (in case a future version of a browser re-incarnates a similar parse error)but it's up to you
When my own hasLayout filter [webmasterworld.com] gained a bit of momentum and I felt the need to explain that it was simply one of the choices available depending on how you like to code. I also discovered the Height Hack (parse hack fed or not) is not 100% stable, And if you read the second to last post in that thread I link to examples and the hasLayout hack management [onhavinglayout.fwpf-webdesign.de] page (scroll to bottom table)
Your answer will most likely work in most cases, I'm just wary of posting one solution for hasLayout for IE6 and if I were to recommend something it would be:
<!--[if lte IE 6]>
<style type="text/css">
.two {zoom: 1;}
</style>
<![endif]-->
not only does the zoom clearly show this is an IE hack, but the conditional comment separates it completely so only the versions of IE that require it see it. It can be placed and forgotten! So if you're talking good coding practice, maybe suggest something like that?
Ultimately no matter which Hack a person chooses to manage their IE hasLayout issues with, I still recommend putting it in a versioned conditional comment because even IE6 & 7 have differences and 1 or both of them could be around for quite a while yet!
Legatoz, if I came off "harsh", I apologize. But, the solution still stands, so I am gratified that I helped a fellow human being in their hour of need and frustration.
SuzyK, I try to show proper semantic markup when helping in CSS forums because 90% of the newbies out there wouldn't know a header or paragraph tag if it jumped off the screen and gobbled like a turkey.
I want to help the newbie GET on the whole standards valid, semantic bandwagon before it is too late and they get into bad habits that will just have them going from forum to forum begging help for years until they finally "get it" - like I did after 10 years of coding tag soup professionally.
Those of us who have been doing this since a color monitor was the newest cool thing, had to beat the tag soup, table design, transitional doctype demons out of ourselves; I think of the horror facing millions of beginners around the world who don't understand that most times they can use <p class="bingo"> exactly the same as <div class="bingo">.
90% of the people I see asking for help in forums don't know valid, semantic markup, proper doctyping and cross-browser techniques (and 50% of THEM use some WYSIWYG editor).
So I never assume they simply left something out for expediency in posting question. Assuming they know what they are doing is foolhardy and a waste of your time when your solution doesn't work because you discover they have markup before the doctype declaration or tables in the head section.
I approach an answer as follows:
1. if I know the issue, I first try to provide the solution (if a quick fix like here).
2. I then try to explain the solution
3. I then point out any other errors I see that could lead to other problems or bad coding habits and will eventually have to be beaten out of them with a cane.
It is all about helping people. But we can't help anyone if they only show us one piece of the puzzle or leave out pieces that may actually be necessary.
You should take a look at the CSS threads over at phpfreaks.
The level of html horror will curdle the toes of even the most optimistic helper, like yourself. I sometimes awake at night shouting things like,
"For the love of God, Stop him! He's nesting li tags within a paragraph!
