homepage Welcome to WebmasterWorld Guest from 107.22.45.61
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Side by side divs
legatoz




msg:3905176
 8:11 pm on May 1, 2009 (gmt 0)

The code below displays differently in Firefox to IE6. In Firefox, the 'two' divs wrap around the 'one' div however in IE6 they go behind. Is there any way to make them wrap in both (basically to look how it does in FireFox)?


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

 

birdbrain




msg:3905706
 10:38 pm on May 2, 2009 (gmt 0)

Hi there legatoz,

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">

...before anything else.

birdbrain

rocknbil




msg:3905919
 4:23 pm on May 3, 2009 (gmt 0)

Although this doesn't affect the problem, avoid "div-itis." If the content is regular paragraphs, use <p> instead; if they are lists, use <ul><li>.....

legatoz




msg:3906988
 9:47 am on May 5, 2009 (gmt 0)

Thanks to birdbrain and rocknbil for your replies, but unfortunately I'm still getting the same thing :(

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]

simonuk




msg:3907009
 10:47 am on May 5, 2009 (gmt 0)

IE6 needs to be told what the flow of the page is if you add any floats because a float will start separating the flow. IE6 is really bad at guessing when you have mixtures of the two.

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.

swa66




msg:3907016
 11:15 am on May 5, 2009 (gmt 0)

It seems you're using side effects of overflow:auto to get the .two not to go overlapping with .one . It's not something I dug in deeply, but since the (removed) images made that clear .. to keep the discussion going in the right direction.

Try to read a few of suzyuk's recent posts, such as this:
[webmasterworld.com...]

girlsspot




msg:3907556
 3:11 am on May 6, 2009 (gmt 0)

your should make your html code standard

bluesmandeluxe




msg:3908974
 10:07 pm on May 7, 2009 (gmt 0)

First, let me do the quick fix for you - to show no hard feelings for what I am about to say afterwards.

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>

slinky




msg:3909446
 2:23 pm on May 8, 2009 (gmt 0)

For side by side divs, just as a note, I used the inline attribute. Others may have different opinions like creating containers, etc.

dislay: inline;

SuzyUK




msg:3909587
 4:53 pm on May 8, 2009 (gmt 0)

bluesmandeluxe, all that's a tad harsh isn't it?
The OP was about side by side divs, not a coding practice review

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; that is making the effect work in FF (and other compliant browsers)

It is also that which is making IE7 work not because it's complying but because overflow: auto; triggers hasLayout for IE7

*:first-child+html .clearfix {min-height:1px}

However, I wouldn't use that in a month of Sundays

* html div.two {height:1%}

and I would be a little bit wary of 'slapping' the above around willy nilly too

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!

bluesmandeluxe




msg:3910200
 7:37 pm on May 9, 2009 (gmt 0)

That certainly told me thing or two! And a fair cop it was, too.

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved