Div Alignmner... Frustration...
So I'm working on a new template for one of my blogs. It's a simple 2 collumn layout, one for content and one for a sidebar. The issue? I can't get the content to align with the bottom of the header image. So far what I've tried:
site: tonoeology.methejuggler dot com
Style Sheet:
- Increasing the width of the wrapper incase there was padding or margin issues.
- Absolute positioning; which worked but it didn't allow for the content div to expand as more posts were added.
- Floating to the left.
- Rearranging the divs within the index.php file.
- Using a negative margin.
site: tonoeology.methejuggler dot com
Style Sheet:
Code:
/*
Theme Name: Toneology
Theme URI:
Description: Guitar Tone 101.
Version: 1.0
Author: Nic Peel
*/
body, h1, h2, h3, h4, h5, h6, blockquote, dd, dl, hr, p, form {
margin: 0;
padding: 0;
}
body {
background: #242323;
font: 0.8em Arial, Helvetica, sans-serif;
colour: #444444;
}
h1, h2, h3 {
font-weight: normal;
}
h1 {
font: 1em Georgia, Sans-serif;
padding: 0 0 10px 0;
}
a, a:visted {
text-decoration: underline;
color: #000000;
}
a:hover {
text-decoration: none;
color: #ff0000;
}
p {
padding: 10px 0 0 0;
}
/* WRAPPER */
#wrapper {
width: 750px;
margin: 1em auto;
border: 10px solid #ffffff;
background: #ffffff;
padding: 0;
}
/* HEADER */
#header {
background: #ffffff url(images/header.jpg) no-repeat;
width: 750px;
height: 200px;
}
#header h1 {
font-family: Arial;
font-size: 2.8em;
padding: 20px 0 5px 20px;
}
#header p {
font-size: 1em;
padding: 0 0 0 30px;
color: #ffffff;
}
#header a {
text-decoration: none;
color: #ffffff;
}
/* NAVIGATION */
#nav {
background: #333333;
width: 730px;
height: 30px;
font: 1em Arial, sans-serif;
padding: 10px 0 0 20px;
margin: 0 0 10px 0;
}
#nav ul {
list-type-style: none;
margin: 0;
padding: 0;
word-spacing: 1em;
}
#nav li {
display: inline;
}
#nav ul li a {
text-decoration: none;
color: #ffffff;
}
#nav ul li a:hover {
text-decoration: underline;
}
#nav ul li a:active {
text-decoration: underline;
}
/* CONTENT */
#content {
width: 500px;
margin: 0;
padding: 0;
}
.post {
padding: 10px 0 10px 0;
}
.post h2 {
background: #333333 url(images/heading.gif) no-repeat;
height: 30px;
padding: 6px 0 5px 30px;
font: 1.5em Georgia, Sans-serif;
}
.post h2 a, a:hover {
text-decoration: none;
color: #ffffff;
}
.entry {
line-height: 1.4em;
}
p.postmetadata {
border-top: 1px dashed #ccc;
margin: 10px 0 0 0;
}
p.postmetadata a {
text-decoration: none;
color: #000000;
font-weight: bold;
}
p.postmetadata a:hover {
color: #ff0000;
}
/* SIDEBAR */
.sidebar {
width: 240px;
margin: 0 0 0 510px;
padding: 0;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 10px 0 10px 0;
}
.sidebar ul li {
padding: 0 0 10px 0;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
}
.sidebar ul li h2 {
background: #333333 url(images/heading.gif) no-repeat;
height: 30px;
padding: 11px 0 0 30px;
font: 1em Georgia, Sans-serif;
color: #ffffff;
}
.sidebar ul ul li {
list-style-image: url("images/list.gif");
padding: 0;
margin: 0 30px 0 30px;
line-height: 2em;
border-bottom: 1px dashed #BDBDBD;
border-left: none;
border-right: none;
}
.sidebar ul li a {
text-decoration: none;
color: #000000;
}
.sidebar ul li a:hover {
text-decoration: underline;
color: #ff0000;
font-weight: normal;
}
/* SEARCH */
#search {
margin: 10px 0 0 10px;
}
/* COMMENTS */
.comments-template{
margin: 10px 0 0;
border-top: 1px solid #ccc;
padding: 10px 0 0;
}
.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}
.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;
}
.comments-template h2, .comments-template h3{
font-family: Georgia, Sans-serif;
font-size: 16px;
}
.commentmetadata{
font-size: 12px;
}
.comments-template p.nocomments{
padding: 0;
}
.comments-template textarea{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
}
/* FOOTER */
#footer {
background: #ffffff;
width: 750px;
height: 30px;
border: 10px solid #ffffff;
padding: 10px 0 10px 0;
margin: 1em auto;
}
#footer p {
line-height: 18px;
text-align: center;
}
James Simpson