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