CSS Div help needed

Question

kained 0 Junior Poster

16 Years Ago

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;
}

html-css web-design

3 Contributors
5 Replies
144 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by kained

sreein1986 0 Posting Whiz

16 Years Ago

which one style use for that div tag

macneato 29 Posting Pro in Training

16 Years Ago

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,

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kained 0 Junior Poster · Answer 1 · 2008-06-09T13:41:15+00:00

ooops forgot to put a link to the page
http://intweb.tech.bcuc.ac.uk/~20318219/deviant/cv.html

kained 0 Junior Poster · Answer 2 · 2008-06-09T15:44:59+00:00

kained 0 Junior Poster

16 Years Ago

what?

kained 0 Junior Poster · Answer 3 · 2008-06-09T17:02:28+00:00

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!