0

I have a problem with my CSS somewhere. Basicly if i have too much writing in the content div the wording goes under my purple borders rather then moving the borders down to compensate. What have i done wrong? Fairly sure it will be something very obvious!

body {
	text-align: center;
	min-width: 760px;
	background: #000000;
}

div#wrapper {
		margin: 0 auto;
		margin-top: 100px;
		border: 1px solid #47027B;
		width: 760px;
		background: #00000 ;
		background-position: bottom right;
		background-repeat: no-repeat;
		
}

html>body div#wrapper {
		height: 100%;
		min-height: 600px;



}

div#logo {
		float: left;
		height: 410px;
		position: relative;
		top: -10px;
		
		margin-bottom: -10px;
		
		
			width: 150px;
		border-right: 1px solid #47027B;
		border-bottom: 1px solid #47027B;
		background: #FFFFF url('images/logo.gif');
		background-position: center;
		background-repeat: no-repeat;
}

html>body div#logo {
		height: 100%;
		min-height: 394px;
}
h1 {
		color: #E0C480;
		font-size: 18px;
		font-weight: bolder;
}

h2 {
		color: #E0C480;
		font-size: 14px;
		font-weight: bold;
}

b {
		color: #E0C480;
		font-weight: bolder;
}
p {
	color:#FFFFFF;
	font-weight:bold;
	}

div#footer {
		width: 760px;
		clear: both;
		margin: 0 auto;
		font-family: trebuchet ms,arial,verdana;
		font-size: 8pt;
		font-weight: normal;
		color: #00000;
		letter-spacing: 1.1pt;
		padding-top: 20px;
		text-align: right;
}

div#footer A {
		color: #00000;
		font-weight: normal;
		text-decoration: none;
		text-transform: uppercase;
}

div#footer a:hover {
		text-decoration: underline;
}


div#content a {
		color: #ffffff;
		font-weight: bold;
		text-decoration: underline;
}

div#content a:hover {
		text-decoration: underline;
}



div#content {
		text-align: left;
		padding: 15px 150px 15px 15px;
		float: right;
		width: 400px;
		height: 100%;
		font-family: trebuchet ms,arial,verdana;
		font-size: 9pt;
		font-weight: normal;
		color: #00000;
}

html>body div#content {
		min-height: 500px;
		height: 100%;
}

div#topbar {
		height: 75px;
		font-family: trebuchet ms,arial,verdana;
		font-size: 8pt;
		font-weight: normal;
		text-align: left;
		padding-left: 25px;
		padding-top: 10px;
		color: #FFFFFF;
		letter-spacing: 1.1pt;
		border-bottom: 1px solid #47027B;
		clear: left;
}

div#menu {
		float: right;
		width: 760px;
}

div#menu A {
		display: block;
		width: 225px;
		position: relative;
		left:0px;
		top: -10px;
		z-index: 50;
		float: left;
		border: 1px solid #000000;
		height: 25px;
		background: #D4D0c8 url('images/arrow.gif'); 
		background-position: center left;
		background-repeat: no-repeat;
		font-family: trebuchet ms,arial,verdana;
		text-align: center;
		font-size: 14px;
		text-decoration: none;
		padding-right: 10px;
		padding-top: 3px;
		font-weight: bold;
		color: #00000;
		text-transform: uppercase;
}

div#menu a:hover {
		background: #423433 url('images/arrow.gif');
		background-position: center left;
		background-repeat: no-repeat;
		color: #c7c2cb;
}
3
Contributors
5
Replies
6
Views
9 Years
Discussion Span
Last Post by kained
0

Hi Kained,

Simple.

Change the content height attribute to:
height: auto;

Should work. If it doesnt. Let me know. Will look into it further

Regards,

0

tried that it didn't work.

I removed all the height and min height tags and the right hand side float in the content div.

body {
	text-align: center;
	min-width: 760px;
	background: #000000;
}

div#wrapper {
		margin: 100px auto 0;
		border: 1px solid #47027B;
		width: 760px;
		background: #00000 ;
				
}

html>body div#wrapper {
				min-height: 600px;



}

div#logo {
		float: left;
		height: 410px;
		position: relative;
		top: -10px;
		
		margin-bottom: -10px;
		
		
			width: 150px;
		border-right: 1px solid #47027B;
		border-bottom: 1px solid #47027B;
		background: #FFFFF;
		background:url('images/logo.gif');
		background-position: center;
		background-repeat: no-repeat;
}


h1 {
		color: #E0C480;
		font-size: 18px;
		font-weight: bolder;
}

h2 {
		color: #E0C480;
		font-size: 14px;
		font-weight: bold;
}

b {
		color: #E0C480;
		font-weight: bolder;
}
p {
	color:#FFFFFF;
	font-weight:bold;
	}

div#footer {
		width: 760px;
		clear: both;
		margin: 0 auto;
		font-family: trebuchet ms,arial,verdana;
		font-size: 8pt;
		font-weight: normal;
		color: #00000;
		letter-spacing: 1.1pt;
		padding-top: 20px;
		text-align: right;
}

div#footer A {
		color: #00000;
		font-weight: normal;
		text-decoration: none;
		text-transform: uppercase;
}

div#footer a:hover {
		text-decoration: underline;
}


div#content a {
		color: #ffffff;
		font-weight: bold;
		text-decoration: underline;
}

div#content a:hover {
		text-decoration: underline;
}



div#content {
		text-align: left;
		padding: 25px 25px 25px 200px;
		width: 400px;
		font-family: trebuchet ms,arial,verdana;
		font-size: 9pt;
		font-weight: normal;
		color: #00000;
}



div#topbar {
		height: 75px;
		font-family: trebuchet ms,arial,verdana;
		font-size: 8pt;
		font-weight: normal;
		text-align: left;
		padding-left: 25px;
		padding-top: 10px;
		color: #FFFFFF;
		letter-spacing: 1.1pt;
		border-bottom: 1px solid #47027B;
		clear: left;
}

div#menu {
		float: right;
		width: 760px;
}

div#menu A {
		display: block;
		width: 225px;
		position: relative;
		left:0px;
		top: -10px;
		z-index: 50;
		float: left;
		border: 1px solid #000000;
		height: 25px;
		background: #D4D0c8 url('images/arrow.gif'); 
		background-position: center left;
		background-repeat: no-repeat;
		font-family: trebuchet ms,arial,verdana;
		text-align: center;
		font-size: 14px;
		text-decoration: none;
		padding-right: 10px;
		padding-top: 3px;
		font-weight: bold;
		color: #00000;
		text-transform: uppercase;
}

div#menu a:hover {
		background: #423433 url('images/arrow.gif');
		background-position: center left;
		background-repeat: no-repeat;
		color: #c7c2cb;
}

sorted!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.