Member Avatar for Evil_Tidus

Hi,

I'm new to CSS and I'm currently trying to make a a simple webpage, however I'm having a little problem with the content div, it seems that no matter the size I put, the width never goes beyond the width of the menu.

Here is the code, I would appreciate if you could tell me what am I doing wrong here:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<title>My Webpage</title>
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<div id="main">
			<div id="header">
				<h2> <a href="#">My Webpage</a></h2>
			</div>
			<div id="header2">
				<div id="menu">
					<ul>
						<li><a href="#">Section 1</a></li>
						<li><a href="#">Section 2</a></li>
						<li><a href="#">Section 3</a></li>
					</ul>
				</div>
			</div>
			<div id="path">
			home
			</div>
			<div id="content">
				<div id="content_panel">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
					<p>
					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
					<p>
					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
					<p>
					Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</div>
			</div>
		</div>
	</body>
</html>

Here is the CSS file:

html
{
	overflow: scroll;
}

body
{
	text-align: center;
	background-image: url('background.png');
	background-repeat: repeat-x;
}

a
{
	color: #EEEEEE;
	text-decoration: none;
}

#main div
{
	width: 65%;
	margin: auto;
}

#header
{
	width: 100%;
	height: 90px;
	background-color: #347C2C;
	border: 1px solid #254117;
	border-bottom: none;
	text-align: left;
	vertical-align: middle;
}

#header h1,h2
{
	width: 250px;
	font-family: serif;
	padding: 20px 60px 20px 30px;
	color: #EEEEEE;
	cursor: pointer;
}

#header2
{
	width: 100%;
	height: 25px;
	padding: 0px;
	background-color: #347C2C;
	border-left: 1px solid #254117;
	border-right: 1px solid #254117;
	border-bottom: 1px solid #254117;
}

#menu
{
	width: inherit;
	height: 25px;
	margin: auto;
	background-color: #4E9258;
	border: 1px solid #254117;
	border-bottom: none;
	text-align: center;
}

#menu ul
{
	width: inherit;
	height: inherit;
	margin: auto;
	list-style: none;
	font-family: sans-serif;
}

#menu li
{
	display: inline-block;
	height: inherit;
	margin: auto;
	padding: 0px;
	padding-right: 10px;
	padding-left: 10px;
	
}

#menu li:hover
{
	background-color: #4EB47A;
}

#menu a:hover
{
	background-color: #4EB47A;
}

#path
{
	width: 100%;
	border: 1px solid #717D7D;
	border-top: 1px solid #1D4084;
	border-bottom: none;
	text-align: left;
}

#content
{
	width: 100%;
	margin: auto;
	border: 1px solid #717D7D;
	border-top: none;
}

#content_panel
{
	display: block;
	width: 50%;
	margin: 0px;
	border: 1px solid #827B60;
}
  • 2 Contributors
  • 1 Reply
  • 100 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by almostbob
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.