Reputation: 39
I have designed a webpage and I am using CSS for positioning. The layout is a Header, Horizontal Menu, and a Content Section (containing 2 columns). The Header, Horizontal Menu and Content section are all the same width.
I can get them to line up on the left, however I would like to "center" them on the page.
I have created a DIV called 'full' to contain all the other DIVs. When I do this I am able to center the Header and Menu by using CSS code: margin: 0 auto; in the Header and Menu IDs however it doesn't work for the Content ID which stays on the left.
I can float the content section left or right and it is off-center on the respective side. If I remove the float option altogether the content section's background is the same color as the body background.
When I use a debugger the Body and #full cover the width of the page but only seem to vertically cover the header and menu I am not sure why.
My guess is I need to use a "clear" somewhere but I am not sure where. I tried a 'clear: both' function in the #menuBar but it didnt work.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My 1st Practice Page</title>
<style>
#content {
background-color: #eee;
float: left;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="full">
<div id="header">
<h1> Company Name Inc. </h1>
</div>
<div id="menuBar">
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>about us</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="columnLeft">
<h2> Category 1 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 2 </h2>
<img src="images/ss_img007.jpg" width="100" height="100" alt="" border="0">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
<h2> Category 3 </h2>
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 4 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
</div>
<div id="columnRight">
<h2> Pictures </h2>
<img src="images/ss_img001.jpg" alt="" >
<img src="images/ss_img002.jpg" alt="" >
<img src="images/ss_img003.jpg" alt="" >
<img src="images/ss_img004.jpg" alt="" >
<img src="images/ss_img005.jpg" alt="" >
<img src="images/ss_img006.jpg" alt="" >
</div>
</div>
</div>
</body>
</html>
Upvotes: 0
Views: 3241
Reputation: 137
if you want to apply the background color for left and right columns means you just try like this #columnLeft {background: #dedede; } for left column and for right column also you can try with this #columnRight {background: #c0c0c0; }
Your Code....
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
background: #dedede;
}
#columnRight {
width: 376px;
background: #ccc;
float: left;
}
Upvotes: 1
Reputation: 2985
#content {
width:976px;
margin: 0 auto;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
background-color: #eee;
margin:0 auto;
width:600px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
give your respective widths to the content divs - fiddle
Upvotes: 1
Reputation: 137
you given for #content float: left; for that onli it has aligned to left, float: left means it will change the normal flow.. you just check with this code. My 1st Practice Page
#content {
background-color: #eee;
width:976px;
margin:0 auto;
}
body {
background-color: silver;
}
#header {
width: 976px;
height: 154px;
background-image: url('images/header-bg.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0 auto;
}
#header h1 {
color: white;
text-align: center;
padding: 52px;
margin: 0 auto;
}
#menuBar {
width: 976px;
height: 33px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
color: white;
background-color: #2F3C4C;
background: 5px solid red;
margin: 0 auto;
}
#menuBar ul {
list-style-type: none;
float: left;
margin: 0 auto;
}
#menuBar li {
float: left;
width: 150px;
padding: 0 10px;
margin: 0 auto;
text-align: center;
}
#menuBar li:hover {
color: blue;
cursor: auto;
}
#columnLeft {
width: 582px;
padding-left: 18px;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.95em;
line-height: 1.2em;
float: left;
}
#columnLeft img {
float: left;
padding: 5px;
}
#columnRight {
width: 376px;
float: left;
}
#columnRight h2 {
margin: 0 auto;
padding: 10px;
}
#columnRight img {
height: 150px;
width: 150px;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id="full">
<div id="header">
<h1> Company Name Inc. </h1>
</div>
<div id="menuBar">
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>about us</li>
<li>contact us</li>
</ul>
</div>
<div id="content">
<div id="columnLeft">
<h2> Category 1 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our first product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 2 </h2>
<img src="images/ss_img007.jpg" width="100" height="100" alt="" border="0">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
<h2> Category 3 </h2>
<p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. This is some text talking about our third product. This is just a bunch of random information to fill some space. I bet your are really interested. </p>
<h2> Category 4 </h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Here is another paragraph with some more random infomration that I am sure you are not even reading and do not necessarily care about. Lets see how this works. </p>
</div>
</div>
</div>
</body>
</html>
Upvotes: 1