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

cosmicbdog · #1 Dec 3rd, 2007, 05:20

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 · #2 Dec 3rd, 2007, 06:31

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

Marc · #3 Dec 3rd, 2007, 07:40

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

welshstew · #4 Dec 3rd, 2007, 08:51

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 · #5 Dec 3rd, 2007, 08:55

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

MikeHopley · #6 Dec 3rd, 2007, 08:57

Quote:

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 · #7 Dec 3rd, 2007, 10:06

Quote:

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 · #8 Dec 3rd, 2007, 10:14

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 · #9 Dec 3rd, 2007, 10:30

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 · #10 Dec 3rd, 2007, 10:37

Quote:

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 · #11 Dec 3rd, 2007, 10:57

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 · #12 Dec 3rd, 2007, 11:01

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 · #13 Dec 3rd, 2007, 11:07

Quote:

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 · #14 Dec 3rd, 2007, 11:10

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 · #15 Dec 3rd, 2007, 11:15

you can have a look at these

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

welshstew · #16 Dec 3rd, 2007, 11:27

Mike,

Quote:

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.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] having a couple of div's underneath each other?