Tweet
So I'm pretty much a beginner when it comes to coding layouts from scratch, because I've always messed around with templates, but I decided to try making one myself this time, but I've seem to run into a problem?
The content & sidebar background-color seem to show up just fine, but the wrapper background-color doesn't seem to show up?
Help please?
You can view it HERE.
HTML
CSS
The content & sidebar background-color seem to show up just fine, but the wrapper background-color doesn't seem to show up?
Help please?
You can view it HERE.
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Rezina</title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <div id="wrapper"><!--Wrapper Starts--> <div id="header">Site Title</div> <div id="content"><!--Content Starts--> <h1>Header</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis vehicula tellus, sed tempor nisi iaculis eget. Phasellus vitae tincidunt urna. Nam pellentesque dolor velit. In ipsum risus, lobortis at hendrerit et, accumsan sed elit. Vestibulum accumsan vestibulum erat. Maecenas libero erat, vestibulum ut ultrices id, porta a orci. Fusce luctus facilisis tellus, a euismod nunc fringilla id. Nulla id consequat lacus.</p> <p>Sed magna ligula, pulvinar eget suscipit eget, interdum ac dolor. Vivamus tincidunt, libero id tincidunt faucibus, diam ligula imperdiet enim, eu vestibulum enim velit sit amet diam. Quisque ornare sapien sed lacus pulvinar convallis. Vivamus dictum libero nibh. Ut augue sapien, venenatis sit amet imperdiet nec, mattis at libero. Aenean fermentum risus eu lacus ornare in imperdiet lectus lobortis. Morbi interdum mauris a sem dignissim bibendum. Phasellus id augue ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in sagittis odio.</p> <p>Fusce in turpis ut velit lacinia euismod ac sed lectus. Duis varius fermentum sollicitudin. Etiam sed urna sed ante pulvinar blandit. Proin sit amet lacus sed mi ultricies viverra. Sed tempus nisl id libero venenatis tincidunt. Curabitur luctus posuere cursus. Sed eget scelerisque lorem.</p> <h1>Header</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis vehicula tellus, sed tempor nisi iaculis eget. Phasellus vitae tincidunt urna. Nam pellentesque dolor velit. In ipsum risus, lobortis at hendrerit et, accumsan sed elit. Vestibulum accumsan vestibulum erat. Maecenas libero erat, vestibulum ut ultrices id, porta a orci. Fusce luctus facilisis tellus, a euismod nunc fringilla id. Nulla id consequat lacus.</p> <p>Sed magna ligula, pulvinar eget suscipit eget, interdum ac dolor. Vivamus tincidunt, libero id tincidunt faucibus, diam ligula imperdiet enim, eu vestibulum enim velit sit amet diam. Quisque ornare sapien sed lacus pulvinar convallis. Vivamus dictum libero nibh. Ut augue sapien, venenatis sit amet imperdiet nec, mattis at libero. Aenean fermentum risus eu lacus ornare in imperdiet lectus lobortis. Morbi interdum mauris a sem dignissim bibendum. Phasellus id augue ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in sagittis odio.</p> <p>Fusce in turpis ut velit lacinia euismod ac sed lectus. Duis varius fermentum sollicitudin. Etiam sed urna sed ante pulvinar blandit. Proin sit amet lacus sed mi ultricies viverra. Sed tempus nisl id libero venenatis tincidunt. Curabitur luctus posuere cursus. Sed eget scelerisque lorem.</p> </div><!--Content Ends--> <div id="sidebar"><!--Sidebar Starts--> <h2>Navigation</h2> <p>Fusce in turpis ut velit lacinia euismod ac sed lectus. Duis varius fermentum sollicitudin. Etiam sed urna sed ante pulvinar blandit. Proin sit amet lacus sed mi ultricies viverra. Sed tempus nisl id libero venenatis tincidunt.</p> </div><!--Sidebar Ends--> </div><!--Wrapper Ends--> </body> </html>
Code:
body {
background-color: #ccc;
text-align: center;
color: #000;
}
#wrapper {
width: 900px;
margin: 0 auto;
background: #fff;
padding: 5px;
}
#header {
width: 800px;
text-align: right;
background: #fff;
padding: 20px 20px 20px 20px;
font: normal 22px Times New Roman;
letter-spacing: 10px;
}
#content {
float: left;
width: 590px;
background-color: #fff;
font: normal 11px Verdana, Geneva, sans-serif;
line-height: 180%;
letter-spacing: 1px;
text-align: justify;
}
#sidebar {
float: right;
width: 290px;
background-color: #fff;
text-align: justify;
padding: 5px;
font: normal 11px Verdana, Geneva, sans-serif;
line-height: 180%;
letter-spacing: 1px;
}
Comment