[HTML/CSS] 3 DIVs 100%

[liljon28]

Hey,
I was having a lil touble with the css on my site... I wanted 3 columns to be aligned side by side with equal widths (to take up 100% of the screen)...

So i took out my trusty ole calculator and:

100/3= 3.333333333333333333333333333333

my code now looks like this (is this bad to use?) and is there a better way to do it? - it seems to be workin fine ...

#FooterSection1 {
	background-color: #00FFFF;
	float: left;
	height: 100%;
	width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#FooterSection2 {
background-color:#FF0000;
	float: left;
	height: 100%;
	width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#FooterSection3 {
background-color: #00CC00;
	float: left;
	height: 100%;
	width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

 

[Daevius]

If it works, it's grand ^^

Also, put tags in the title next time.

 

[Pieman]

This is slightly better because it changes when you resize your browser:

html, body {
	height: 99%;
	width: 99%;
}
#FooterSection1 {
	background-color: #00FFFF;
	float: left;
	min-height: 100%;
	min-width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#FooterSection2 {
	background-color:#FF0000;
	float: left;
	min-height: 100%;
	min-width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#FooterSection3 {
	background-color: #00CC00;
	float: left;
	min-height: 100%;
	min-width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

 

[Daevius]

Yep, but it won't work with IE :-(

 

[liljon28]

ohh awesome lol well i took it down a few decimal places ... lol aint to good in maths...a friend told me to put them as 33.3% ,33.4% and 33.3% lol i guess it just cleans up everything.

thank Pieman i'll try it out

If it works, it's grand ^^

Also, put tags in the title next time.

k no probs

 

[Daevius]

Yep. Because 33.3 + 33.4 + 33.3 = 100.0

And 33.3333 + 33.3333 + 33.3333 = 99.9999 which is not 100 (obviously ^^)

 

[liljon28]

lol ye thats the maths behind coding... and i thought i would of never needed it... [shoulda pay more attention in school ]

 

[john_d]

hmm i won't do it like that.. ever..

make 2 float - left.. and 1 float right.

 

[foxx]

And what width would those divs have john_d?

 

[Pieman]

Yep, but it won't work with IE :-(

Works good for me, with a little change:

html, body {
	height: 99%;
	width: 99%;
}
#container {
max-width:0%;
max-height:0%;
}#FooterSection1 {
	background-color: #00FFFF;
	float: left;
	min-height: 100%;
	min-width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#FooterSection2 {
	background-color:#FF0000;
	float: left;
	min-height: 100%;
	min-width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#FooterSection3 {
	background-color: #00CC00;
	float: left;
	min-height: 100%;
	min-width: 33.333333333333333333333333333333%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
html, body {
	height: 96%;
	width: 99%;
}
</style>
<![endif]-->

http://pie-designs.net/blog/test.php

 

[Daevius]

Yes, I believe IE7 has this included...IE6 and before not if I remember correctly.

 

[foxx]

I don't usually have problems with IE7, just some minor ones, IE6 is THE pain in the ass, I don't honestly understand why do people still use it..

 

[john_d]

Div floats with IE is a bit bothersome. but there is always a work around to them...

<!--[if lt IE 6]>
IE6 stuff here
<![endif]-->

or
<!--[if lt IE 7]>
IE7 stuff here
<![endif]-->

a pretty useful

 

[liljon28]

Div floats with IE is a bit bothersome. but there is always a work around to them...

<!--[if lt IE 6]>
IE6 stuff here
<![endif]-->

or
<!--[if lt IE 7]>
IE7 stuff here
<![endif]-->

a pretty useful

hmm i've used it before for my png's to fix them up ^^


The Page I want to fix that code for