100% menu height and random margin problem

1 reply [Last post]

Sat, 2011-04-09 16:45

pedrotome

Offline

newbie

Last seen: 11 years 5 weeks ago

Timezone: GMT+1

Joined: 2011-04-09

Posts: 1

Points: 2

Hello.
I'm designing my first website and I'm facing some problems. I've researched a lot, but can't really fix my problem...

I want the site to be fluidly resizable - I hate having a 1920x1080 screen and seeing every site consisting only of a small, centered rectangle, using 20% of the available space.

The problems are:
First:
There's some kind of margin between the content and the menu I can't seem to get rid of. When the menu stops (which is another problem), that margin goes away...
How can I fix this? I want to be able to control the margin.
Check the first attached image. The red scribbles are about this problem.

Second:
The menu doesn't extend beyond its contents. I want it to be as big as... well, as big as necessary, I want it to extend to the bottom.
How can I do it?
Check the first attached image. The purple scribbles are about this problem.
The second attached image is the design I made in Photoshop. That's pretty much what I'm trying to achieve with CSS.

Thanks!

Here's the code:

CSS:

@charset "utf-8";
/* CSS Document */
 
 
html,body{margin: 0; padding: 0; height: 100%; min-width: 1000px;}
 
#container {
	min-height: 100%;
}
 
/* IE 100% height hack */
* html #container {
	height: 100%
}
 
 
/* --------------------------------------------- */
 
 
#header {
	margin: 0;
	padding: 0;
	height: 165px;
	background-color: #7ab91c;
}
 
	#header h1 {
		margin: 0;
		padding: 0;
		line-height: 165px;
		vertical-align: middle;
		text-align: center;
		font-size: 1.2em;
		font-weight: normal;
		font-family: Verdana, Geneva, sans-serif;
		color: white;
	}
 
	#header img {
		margin: 0;
		padding: 0;
		z-index: 2;
		position: relative;
		float: right;
		right: 60px;
		top: -165px;
	}
 
 
/* --------------------------------------------- */
 
 
#right_column {
	width: 180px;
	position: relative;
	float: right;
	right: -81px;
	padding-left: 20px;
	background-color: #ededed
}
 
	#right_column h2 {
		color: #f0ba14;
		font-size: 130%;
		font-weight: normal;
		font-family: Tahoma, Verdana, Geneva, sans-serif;
		padding: 0;
		margin-top: 1.2em;
		margin-bottom: 0.2em;
	}
 
	#right_column ul {
		color: black;
		font-size: 90%;
		font-family: Verdana, Geneva, sans-serif;
		line-height: 1.5;
		padding: 0; /* removes all padding from the unordered list */
    	margin: 0; /* removes all margins from the unordered list */
    	list-style-type: none; /* removes the bullets */
	}
 
		#right_column li:hover {
			background: #d4d4d4;
		}
 
	#right_column a {
		text-decoration: none;
		color: black;
	}
 
	/* Highlight the-page-the-user-is-on's link in the right_column */
	#HaloReach_Forum .HaloReach_Forum, #HaloReach_Guides .HaloReach_Guides, #HaloReach_Articles .HaloReach_Articles, #HaloReach_HotTopics .HaloReach_HotTopics,
	#HaloODST_Forum .HaloODST_Forum, #HaloODST_Guides .HaloODST_Guides, #HaloODST_Articles .HaloODST_Articles, #HaloODST_HotTopics .HaloODST_HotTopics,
	#GruntsPajamas_Forum .GruntsPajamas_Forum, #GruntsPajamas_Articles .GruntsPajamas_Articles, #GruntsPajamas_Events .GruntsPajamas_Events, #GruntsPajamas_Gallery .GruntsPajamas_Gallery {
		background: #d4d4d4;
	}
 
 
/* --------------------------------------------- */
 
 
#left_column {
	position: relative;
	margin-right: 220px;
	padding-left: 25px;
	background-color: white;
}
 
	#left_column #single_article h1 {
		color: #b2c336;
		font-size: 220%;
		font-weight: normal;
		font-family: Tahoma, Helvetica, Geneva, sans-serif;
	}
 
	#left_column #single_article p {
		color: black;
		font-size: 100%;
		text-align: justify;
		font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
	}
 
		#left_column #single_article p a {
			color: #1aa8c6;
		}
 
 
#footer {
	margin: 0;
	padding: 0;
	position: relative;
	height: 60px;
	color: black;
	font-size: 70%;
	text-align: center;
	font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
	background-color: white;
}

HTML:

@charset "utf-8";
/* CSS Document */
 
 
html,body{margin: 0; padding: 0; height: 100%; min-width: 1000px;}
 
#container {
	min-height: 100%;
}
 
/* IE 100% height hack */
* html #container {
	height: 100%
}
 
 
/* --------------------------------------------- */
 
 
#header {
	margin: 0;
	padding: 0;
	height: 165px;
	background-color: #7ab91c;
}
 
	#header h1 {
		margin: 0;
		padding: 0;
		line-height: 165px;
		vertical-align: middle;
		text-align: center;
		font-size: 1.2em;
		font-weight: normal;
		font-family: Verdana, Geneva, sans-serif;
		color: white;
	}
 
	#header img {
		margin: 0;
		padding: 0;
		z-index: 2;
		position: relative;
		float: right;
		right: 60px;
		top: -165px;
	}
 
 
/* --------------------------------------------- */
 
 
#right_column {
	width: 180px;
	position: relative;
	float: right;
	right: -81px;
	padding-left: 20px;
	background-color: #ededed
}
 
	#right_column h2 {
		color: #f0ba14;
		font-size: 130%;
		font-weight: normal;
		font-family: Tahoma, Verdana, Geneva, sans-serif;
		padding: 0;
		margin-top: 1.2em;
		margin-bottom: 0.2em;
	}
 
	#right_column ul {
		color: black;
		font-size: 90%;
		font-family: Verdana, Geneva, sans-serif;
		line-height: 1.5;
		padding: 0; /* removes all padding from the unordered list */
    	margin: 0; /* removes all margins from the unordered list */
    	list-style-type: none; /* removes the bullets */
	}
 
		#right_column li:hover {
			background: #d4d4d4;
		}
 
	#right_column a {
		text-decoration: none;
		color: black;
	}
 
	/* Highlight the-page-the-user-is-on's link in the right_column */
	#HaloReach_Forum .HaloReach_Forum, #HaloReach_Guides .HaloReach_Guides, #HaloReach_Articles .HaloReach_Articles, #HaloReach_HotTopics .HaloReach_HotTopics,
	#HaloODST_Forum .HaloODST_Forum, #HaloODST_Guides .HaloODST_Guides, #HaloODST_Articles .HaloODST_Articles, #HaloODST_HotTopics .HaloODST_HotTopics,
	#GruntsPajamas_Forum .GruntsPajamas_Forum, #GruntsPajamas_Articles .GruntsPajamas_Articles, #GruntsPajamas_Events .GruntsPajamas_Events, #GruntsPajamas_Gallery .GruntsPajamas_Gallery {
		background: #d4d4d4;
	}
 
 
/* --------------------------------------------- */
 
 
#left_column {
	position: relative;
	margin-right: 220px;
	padding-left: 25px;
	background-color: white;
}
 
	#left_column #single_article h1 {
		color: #b2c336;
		font-size: 220%;
		font-weight: normal;
		font-family: Tahoma, Helvetica, Geneva, sans-serif;
	}
 
	#left_column #single_article p {
		color: black;
		font-size: 100%;
		text-align: justify;
		font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
	}
 
		#left_column #single_article p a {
			color: #1aa8c6;
		}
 
 
#footer {
	margin: 0;
	padding: 0;
	position: relative;
	height: 60px;
	color: black;
	font-size: 70%;
	text-align: center;
	font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
	background-color: white;
}

Attachment	Size
problem1.jpg	652.11 KB
SGPSite_SingleArticle.png	98.89 KB

Tags:

Mon, 2011-04-11 06:31

Tyssen

Offline

Moderator

Brisbane

Last seen: 7 years 31 weeks ago

Brisbane

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8201

Points: 1386

You posted your CSS twice

How about a link to the page?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

100% menu height and random margin problem

You posted your CSS twice

User login

Navigation