help with bottom margins

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

help with bottom margins

Post 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>
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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 */
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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;
	
}
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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;
}
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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!!
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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/
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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"
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

To smallerize it, you could also do this...

Code: Select all

.masterDiv {
    text-align: left;
    margin: 0 auto;
    width: 768px;
} 
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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)
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Good tips matthijs. I prefer the longer style's though because it makes it easier to read for me.
Post Reply