Page 1 of 1

help with bottom margins

Posted: Fri Aug 04, 2006 7:02 pm
by s.dot
http://65.29.93.164/freegrabbag/

this page, is not displaying how i'd like it in IE or FireFox. What I would like for it to do is have the center column expand from the very top of the browser window, down to the very bottom

Something like this in ASCII :P

Code: Select all

_____________________
 |               |
 |               |
 |               |
 |               |
 |               |
_____________________
Except with no margin at the bottom :P
I'm trying to get away from my table habits, and learn some solid CSS

Code: Select all

<html>
<head>
<title>title</title>
<style type="text/css">
body {
	
	/* Margins */
	margin-top: 0px;
	margin-bottom: 0px;
	
	/* Background Image */
	background-color: #F3F3F3;
	background-image: url('images/bg_circle.gif');
	background-repeat: repeat;
	background-attachment: fixed;
	
	/* Text Align */
	text-align: center;
	
}

/* Master Div */
.masterDiv {
	
	/* Size Properties */
	width: 740px;
	height: 100%;
	
	/* Background */
	background-color: #FFFFFF;
	
	/* Left & Right Borders */
	border-left: solid 1px lightblue;
	border-right: solid 1px lightblue;
	
	/* Margins */
	margin-bottom: 0px;
	
}

.logoDiv {
	
	/* Size Properties */
	width: 100%;
	height: 100px;
	
	/* Border Properties */
	border-bottom: solid 1px #CCCCCC;
	
}

.navDiv {
	
	/* Size Properties */
	width: 100%;
	height: 30px;
	
	/* Background Properties */
	background-color: #3399CC;
	
	/* Border Properties */
	border-bottom: solid 1px #CCCCCC;
	
}
.contentDiv {
	
	/* Size Properties */
	width: 100%;
	height: 100%;
	
	/* Text Align */
	text-align: left;
	
}
.sideDiv {
	
	/* Size Properties */
	width: 150px;
	height: 100%;
	
	/* Float */
	float: left;
	
}
.middleDiv {
	
	/* Size Properties */
	width: 450;
	height: 100%;
	
	/* Float */
	float: left;
	
}
.rightDiv {
	
	/* Size Properties */
	width: 130px;
	height: 100%;
	
	/* Float */
	float: left;
	
}
.clear {
	
	/* Clear Properties */
	clear: both;
	
}
</style>
</head>
<body>
<center>
	<div class="masterDiv">
		<div class="logoDiv">LOGO HERE</div>
		<div class="navDiv">Navigation Here</div>
		<div class="contentDiv">
			<div class="sideDiv">side</div>
			<div class="middleDiv">middle</div>
			<div class="rightDiv">right</div>
		</div>
	</div>
</center>
</body>
</html>

Posted: Fri Aug 04, 2006 7:07 pm
by Benjamin
You will have to set the height of the html and body tags to 100%, and move your header into the content div. Otherwise the height will be 100% of the browser window + header.

Code: Select all

html, body { height: 100%; } /* IE height fix, body needs a parent element to obtain height from */

Posted: Fri Aug 04, 2006 7:14 pm
by s.dot
Nice.

Does it perfectly in firefox. IE doesn't make the masterDiv go down to the bottom though

Code: Select all

html {
	
	/* Height */
	height: 100%;
	
}

body {
	
	/* Height */
	height: 100%;
	
	/* Margins */
	margin-top: 0px;
	margin-bottom: 0px;
	
	/* Background Image */
	background-color: #F3F3F3;
	background-image: url('images/bg_circle.gif');
	background-repeat: repeat;
	background-attachment: fixed;
	
	/* Text Align */
	text-align: center;
	
}

/* Master Div */
.masterDiv {
	
	/* Size Properties */
	width: 740px;
	height: 100%;
	
	/* Background */
	background-color: #FFFFFF;
	
	/* Left & Right Borders */
	border-left: solid 1px lightblue;
	border-right: solid 1px lightblue;
	
	/* Margins */
	margin-bottom: 0px;
	
}

.logoDiv {
	
	/* Size Properties */
	width: 100%;
	height: 100px;
	
	/* Border Properties */
	border-bottom: solid 1px #CCCCCC;
	
}

.navDiv {
	
	/* Size Properties */
	width: 100%;
	height: 30px;
	
	/* Background Properties */
	background-color: #3399CC;
	
	/* Border Properties */
	border-bottom: solid 1px #CCCCCC;
	
}
.contentDiv {
	
	/* Size Properties */
	width: 100%;
	height: auto;
	
	/* Text Align */
	text-align: left;
	
}
.sideDiv {
	
	/* Size Properties */
	width: 150px;
	height: auto%;
	
	/* Float */
	float: left;
	
}
.middleDiv {
	
	/* Size Properties */
	width: 450;
	height: auto;
	
	/* Float */
	float: left;
	
}
.rightDiv {
	
	/* Size Properties */
	width: 130px;
	height: auto;
	
	/* Float */
	float: left;
	
}
.clear {
	
	/* Clear Properties */
	clear: both;
	
}

Posted: Fri Aug 04, 2006 7:17 pm
by Benjamin

Code: Select all

.contentDiv {
       
        /* Size Properties */
        width: 100%;
        height: auto%;
       
        /* Text Align */
        text-align: left;
       
}
Should be..

Code: Select all

.contentDiv {
       
        /* Size Properties */
        width: 100%;
        height: 100%;
       
        /* Text Align */
        text-align: left;
       
}
EDIT: Hmm, that shouldn't need to be changed... I'm not sure why it's not working.. Try it and see.

EDIT2: I bet masterdiv in IE is trying to inherit the height of the center tag. Use this instead..

Code: Select all

body { text-align: center; }

.masterDiv {
text-align: left;
margin: 0px auto 0px auto;
width: 768px;
}

Posted: Fri Aug 04, 2006 7:24 pm
by s.dot
Wow, you are right.
It was inheriting the center height's tag.
But now the column isn't centered in FF

Man, CSS is hard :( :lol:

perhaps I should keep the center tag, and give it 100% height

[edit]
POW, this solved it.

Code: Select all

center {
	
	/* Height */
	height: 100%;
	
}
Thanks a bunch man!!

Posted: Fri Aug 04, 2006 7:28 pm
by Benjamin
That is a bandaid fix, I would center it using css as I believe that tag is depreciated anyway. Might want to look around, setting the left and right margins to auto for the masterDiv and applying the body {text-align: center } tags should have centered it. I might be missing something though..

http://www.maxdesign.com.au/presentation/center/
http://www.google.com/search?q=css+how+ ... S:official

Posted: Fri Aug 04, 2006 7:29 pm
by s.dot
One last thing.

When the .sideDiv, .middleDiv, or .rightDiv have enough content to make the page scroll, it does what I like in IE, which is still keep the column from top to bottom of the browser. Firefox doesn't do this. the height is 100% of the page before scrolling, so when you scroll, the column gets cut off at the bottom.

http://65.29.93.164/freegrabbag/

Posted: Fri Aug 04, 2006 7:30 pm
by s.dot
astions wrote:That is a bandaid fix, I would center it using css as I believe that tag is depreciated anyway. Might want to look around, setting the left and right margins to auto for the masterDiv and applying the body {text-align: center } tags should have centered it. I might be missing something though..

http://www.maxdesign.com.au/presentation/center/
http://www.google.com/search?q=css+how+ ... S:official
Right on. I don't want to use any "bandaid" fixes"

Posted: Fri Aug 04, 2006 7:33 pm
by Benjamin
hmm, maybe set the background color to white, or set an overflow property to scroll, that would give you scroll bars though. I would look around for examples on how others do it. I've done it before but I don't have the code any more and I remember it being a pain.

Posted: Fri Aug 04, 2006 7:45 pm
by s.dot
astions wrote: EDIT2: I bet masterdiv in IE is trying to inherit the height of the center tag. Use this instead..

Code: Select all

body { text-align: center; }

.masterDiv {
text-align: left;
margin: 0px auto 0px auto;
width: 768px;
}
You were right about this. This made it centered in both FF and IE without the use of the center tags. Yay, thanks.

Posted: Fri Aug 04, 2006 9:43 pm
by RobertGonzalez
To smallerize it, you could also do this...

Code: Select all

.masterDiv {
    text-align: left;
    margin: 0 auto;
    width: 768px;
} 

Posted: Sat Aug 05, 2006 1:32 am
by matthijs
More smallerize and other tips:

- width: 100%; is not needed on the divs. A div will take up 100% width by default.
- #333333; can be shortened to #333.
- In .navButton border: 0px 0px 0px 0px // needs a ; at the end
- border: 0px 0px 0px 0px can be shortened to border:none;
- In any rule 0px can be shortened to 0
- Background-image can be shortened as well:

Code: Select all

background: url('../images/black_dot.gif') top right repeat-y;
- height: auto; is not needed. A div has an auto height by default (doesn't inherit height)

Posted: Sat Aug 05, 2006 1:35 am
by Benjamin
Good tips matthijs. I prefer the longer style's though because it makes it easier to read for me.