[SOLVED] having a couple of div's underneath each other?

[cosmicbdog]

Hi guys and gals, I know this is simple but its been a curious one for me for some time now. See in the following code 'thischunk' I want to be on its own line. Instead both div's just append side by side because I'm a bit uneducated with css. So uneducated I tried things like 'clear: right;' cuz my silly brain says it will clear everything right of the div. Am I dumb?

Say I have the code:

HTML: Select all

<div id='thischunk' style="margin-bottom: 3px;">
				<div style="float: left; background-color: #ffffcc; width: 60px;">Mobile:</div>
				<div style="float: left; padding-left: 5px;">01234567899</div>
			</div>
			
			
			<div id='thischunk' style="margin-bottom: 3px;">
				<div style="float: left; background-color: #ffffcc; width: 60px;">Email:</div>
				<div style="float: left; padding-left: 5px;">email@email.com</div>
			</div>

How can I make 'thischunk' be on its own line?

Thankyou!

[cosmicbdog]

I put some <br />'s in between but its so not cool.

[Marc]

Remove the float:left and they will go beneath each other.. Is that what you are asking?

[welshstew]

you could also place the following in between the divs:

HTML: Select all

<div class="clear"></div>

with the following yin your css

Code: Select all

.clear{clear:both; overflow:hidden;}

[Marc]

Yeah, welshstew is correct.. I completely read the question and code wrong.

[MikeHopley]

Originally Posted by welshstew

you could also place the following in between the divs:

Code: Select all

.clear{clear:both; overflow:hidden;}

You seem to think that combining these two methods makes them better. It doesn't; the whole point of the "overflow method" is that you don't need a clearing <div> (I don't care about adding <div>s, but some people do).

Applying "overflow: hidden" to an empty <div> will do absolutely nothing, because the <div> has no content to overflow. In fact, it occupies zero space.

So the correct CSS for a clearing <div> is simply:

Code: Select all

.clear { clear: both; }

[welshstew]

Originally Posted by MikeHopley

You seem to think that combining these two methods makes them better. It doesn't; the whole point of the "overflow method" is that you don't need a clearing <div> (I don't care about adding <div>s, but some people do).

Applying "overflow: hidden" to an empty <div> will do absolutely nothing, because the <div> has no content to overflow. In fact, it occupies zero space.

For some reason it does have an affect in IE6, without it the browser seems to add some 'phantom space' and by adding the above it sometimes gets rid of it.

Other times it doesn't work by itself, in which case I have to add a whole heap of things that will allow it work correctly in that ever so lovely browser.

Code: Select all

.clear{
    clear:both;
    width:0px;
    height:0px;
    overflow:hidden;
    font-size: 1px;
    line-height: 0px;
}

At present 45% of our user base still use this browser so we have to consider it when designing.

[MikeHopley]

Most of that code is completely unnecessary. Your phantom space probably comes from margins being applied to the <div>, or to elements before it.

It's also possible that your "heap of things" is solving the problem by activating hasLayout. But you only need one property to activate hasLayout; I use "zoom: 1" (yes, I know this is invalid).

IE6 follows its own rules, and I recommend isolating your IE6 hacks in a separate stylesheet. There's no need to clutter your main stylesheet with IE6 junk, and isolating the styles allows you to use invalid code with a clear conscience.

[cosmicbdog]

HTML: Select all

clear: both; overflow: hidden;

worked perfectly!

I don't have an internet ignorer, I mean explorer setup on my computer... but I'm not sure if this relates to what you guys are talking about with the overflow, but without the 'overflow: hidden' it ignored my 'margin-bottom: 3px;' and there was no space between. This was on safari and firefox.

Thanks for the help everyone!

[MikeHopley]

Originally Posted by cosmicbdog

I don't have an internet ignorer, I mean explorer setup on my computer

"Internet ignorer". Just so.

No matter how dirty it might make you feel, you should get both IE6 and IE7. These browsers together account for 80% market share, so you need to make sure your website works in them.

[cosmicbdog]

I know I know... actually I would test with IE but they stopped even making it downloadable for the Mac. I don't get it... 'Office' is in all the stores and Bill has shares in Apple.

I had an account with browsercam.com for a while. That was a good way of checking. Luckily my sites aren't too cool and seem to look the same across the board.

[cosmicbdog]

also, fingers crossed the 80/20 rule applies to this. You know, 80% of your business comes from 20% of your customers? that rule? Assuming that Ie users are dimwits who don't know a computer from a calculator the 20% that make conscious choices on the web are the ones that matter anyways...

[MikeHopley]

Originally Posted by cosmicbdog

also, fingers crossed the 80/20 rule applies to this. You know, 80% of your business comes from 20% of your customers? that rule? Assuming that Ie users are dimwits who don't know a computer from a calculator the 20% that make conscious choices on the web are the ones that matter anyways...

That's an idiotic assumption (albeit an entertaining one).

Most of the business conducted on the web comes from people who "don't know a computer from a calculator". These people use IE. They are not stupid, just uninformed about browsers and uninterested in them.

Hell, one of my best friends uses IE. He is studying for a physics Phd. in condensed matter, and he got the top undergraduate mark in his year at Oxford. Are you calling him a dimwit? He's probably more intelligent than anyone you've ever met.

Sure, 80% of your business may come from 20% of your customers. But if your site breaks in IE, you will have 80% fewer customers. Which would you rather have: 20% of 20%, or 20% of 100%? That is to say, would you like to lose four out of every five sales?

I understand it must be difficult testing with IE on a Mac. But you must find a way.

Just like you, I enjoy excoriating IE. It eases the pain. But you have to make practical business decisions. In business, numbers always take precedence over ideologies.

[welshstew]

Ignore the below, just seen Mikes post that you are on a mac - sorry.

Stew



you can download a VPC of either IE6 or IE7 9depending which one you have on your PC from here

Another option is to have a look at multiple IE

[welshstew]

you can have a look at these

http://www.iemulator.com/
http://www.lismoresystems.com/en/

[welshstew]

Mike,

Originally Posted by MikeHopley

It's also possible that your "heap of things" is solving the problem by activating hasLayout. But you only need one property to activate hasLayout; I use "zoom: 1" (yes, I know this is invalid).

I have tried the above, and it works great but it adds about 1em space to the div, so I would need to add other bits to conteract that anyway.

I may start another thread about this if I have time.

Thanks for the advice.

[cosmicbdog]

Following a similar logic that we conform to fit in with the monopoly, why are we speaking english and not mandarin? I mean, there'll be more mandarin speaking people with Phd's then the whole population of UK within a couple years... why bother with english? You also are missing out on 4 out of 5 sales.

[Marc]

Because, as you say: within a couple of years - not yet!

[MikeHopley]

Originally Posted by cosmicbdog

Following a similar logic that we conform to fit in with the monopoly, why are we speaking english and not mandarin? I mean, there'll be more mandarin speaking people with Phd's then the whole population of UK within a couple years... why bother with english? You also are missing out on 4 out of 5 sales.

Who says we are speaking English?

If my current project is successful, I intend to have it translated into Chinese/mandarin/whatever, because my largest potential market is in China.

But while hacking for IE can be tough, it's not nearly as tough as learning to speak fluent Mandarin; and translation is not cheap. Still, I may be able to call on friends to translate for me, in return for a slice of the profits.

Moreover, we're fortunate that English is the de facto standard for international business. Once again, practical concerns beat foolish ideologies every time.

If you believe whatever you want to believe, you'll be a loser. Winners observe what really happens, and act accordingly.

[welshstew]

Originally Posted by cosmicbdog

Following a similar logic that we conform to fit in with the monopoly, why are we speaking english and not mandarin? I mean, there'll be more mandarin speaking people with Phd's then the whole population of UK within a couple years... why bother with english? You also are missing out on 4 out of 5 sales.

It's not only the UK that use english as it's first language.

And if you build your site with a server side code you could add a mandarin language option.