Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

[HTML/CSS] 3 DIVs 100%

Junior Spellweaver
Joined
Jun 5, 2005
Messages
192
Reaction score
1
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 ...
Code:
#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;
}
 
Custom Title Activated
Member
Joined
Jun 28, 2007
Messages
2,986
Reaction score
3
If it works, it's grand ^^

Also, put tags in the title next time.
 
duck you, I'm a dragon
Member
Joined
Apr 29, 2005
Messages
6,407
Reaction score
130
This is slightly better because it changes when you resize your browser:

Code:
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;
}
 
Custom Title Activated
Member
Joined
Jun 28, 2007
Messages
2,986
Reaction score
3
Yep, but it won't work with IE :-(
 
Junior Spellweaver
Joined
Jun 5, 2005
Messages
192
Reaction score
1
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
 
Custom Title Activated
Member
Joined
Jun 28, 2007
Messages
2,986
Reaction score
3
Yep. Because 33.3 + 33.4 + 33.3 = 100.0

And 33.3333 + 33.3333 + 33.3333 = 99.9999 which is not 100 (obviously ^^)
 
Junior Spellweaver
Joined
Jun 5, 2005
Messages
192
Reaction score
1
lol ye thats the maths behind coding... and i thought i would of never needed it... [shoulda pay more attention in school :(]
 
duck you, I'm a dragon
Member
Joined
Apr 29, 2005
Messages
6,407
Reaction score
130
Yep, but it won't work with IE :-(

Works good for me, with a little change:
Code:
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]-->



:wink:
 
Custom Title Activated
Member
Joined
Jun 28, 2007
Messages
2,986
Reaction score
3
Yes, I believe IE7 has this included...IE6 and before not if I remember correctly.
 
Custom Title Activated
Member
Joined
Feb 27, 2004
Messages
1,378
Reaction score
50
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
 
Back
Top