WordPress.org

I have been trying my hand at designing a blog website for a friend and I'm almost done except with the fact the text for the actual blogs is all off on the left.

http://paintingchef.com/

I want all of the text to fit into the green boxes. I have messed around with the CSS a million times and maybe I'm just tired but I can't get the Left side moved. Can anyone suggest anything?

Thanks a million!

Edit the class entry and add a pit of margin and maybe padding to it

There is also a <div style="clear :both"> tag just after it which you can try to remove and see if it helps

Thanks. I tried adding some padding and removed the clear:both tag and it's still being difficult. (Not to mention the sidebar on April's Archive is screwed up!) I'll keep plugging along...

Did you try a margin?
Or increasing it in the tag above

I've changed the CSS around so much I'm going blind. I also did some adjustments on the php pages but I'm very leary of doing anything on those pages since I don't know Perl at all and I don't want to screw that up. I'll post the CSS below, maybe another pair of eyes will catch something. Also the text problem is only happening on the front page of the site. If you go to the archives of previous months it's totally fine. I'm so stumped.

CSS:

/*
Theme Name: Gerber Daisy
Description: Gerber Daisies with a twist of lime sherbert!
Author: Elyse
Author URI: http://www.estudiodesigns.com
Version: 1.5

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

*/

body {
background-color: #FFFFFF;
font-family: "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

a, a:visited, a:link {
color: #990000;
}

a:hover {
text-decoration: none;
background-color: #CCFF99;
}

a:active {
background-color: #CFF99;
}

input, textarea {
background-color: #FFFFFF;
}

input:focus, textarea:focus {
background-color: #FFFFFF;
}

#wrapper {
background-color: #990000;
background-image: url(images/bg_main.jpg);
background-repeat: repeat-y;
margin: 20px auto;
width: 650px;
}

/* Header */

#head {
height: 273px;
width: 650px;
background-image: url(images/bg_head.jpg);
}

#head div#blog_title {
font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 2.5em;
color: #99FF66;
position: relative;
top: 170px;
left: 30px;
}

#head div#blog_title a {
color: #99FF66;
text-decoration: none;
}

#head div#blog_title a:hover {
background-color: transparent;
}

/*Main Content*/

#main {

float: left;
width: 425px;
background-color: transparent;
}

#main h1, #main h2 {
margin: 20px 5px 47px;
font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 2.0em;
font-weight: normal;
color: #990000;
}

#main h2 {
font-size: 1.5em;
}

#main h1 a, #main h2 a {
text-decoration: none;
}

#main p, #main div.navigation, #main ul, #main div.post_info, #main div.date, #main #searchform {
margin: 1px 20px 5px 47px;
text-align: justify;
line-height: 1.4em;
padding: 5px

}

.left {
text-align: left;
padding-left:5px
}

.right {
text-align: right;
padding-right:5px
}

#main div.post_info {
border-top: 1px dotted #66CC00;
}

#main div.date {
margin-bottom: 0px;
}

/* Sidebar */

#sidebar {
float: left;
width: 220px;
margin: 20px 0 0 0;
padding: 0;
list-style: none;
background-image: url(images/bg_sidebar_main.jpg);
background-repeat: repeat-y;
}

#sidebar h4 {
background-image: url(images/bg_sidebar_head.jpg);
background-repeat: no-repeat;
background-color: transparent;
font-size: 1.3em;
font-weight: normal;
font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;
padding: 25px 0 14px 20px;
}

#sidebar ul {
margin: 0;
padding: 0 0 40px 0;
list-style: none;
background-image: url(images/bg_sidebar_footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

#sidebar ul li {
background: transparent;
padding: 0 0 3px 30px;
}

/*Footer*/

#footer {
width: 650px;
background-image: url(images/bg_footer.jpg);
background-repeat: no-repeat;
background-color: #990000;
clear: both;
padding-top: 50px;
padding-bottom: 30px;
color: #99FF66;
}

#footer p {
margin: 0 50px;
font-size: 0.8em;
line-height: 1.5em;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
color: #99FF66;
background: transparent;
}

/* Comment Styles */

#commentform {
margin-bottom: 40px;
}

#commentform input, #commentform textarea {
width: 305px;
margin: 0 20px;
padding: 3px;
color: #FFFFFF;
font-family: "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
line-height: 1.4em;
}

#commentform input[type=submit] {
width: 13em;
float: right;
}

#commentform label {
display: block;
padding-bottom: 3px;
}

#commentlist {
margin: 0;
padding: 0;
margin: 0 20px 15px 50px;
line-height: 1.4em;
list-style-type: none;
}

#commentlist li {
padding: 0;
margin: 0 0 30px 0;
}

#commentlist li p {
padding: 0;
margin: 0 3px 10px 3px;
}

#commentlist cite {
display: block;
background-color: #FFFFFF;
padding: 3px;
font-style: normal;
font-weight: bold;
margin-bottom: 3px;
}

#searchform input[type=submit] {
margin-top: 2px;
}

/*Comments Popup*/

#comments_popup {
background-color: #FFFFFF;
font-family: "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}

#comments_popup h1#header {
background-color: #FFFFFF;
margin: 0 0 20px 0;
padding: 10px;
font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 2.5em;
color: #336600;
}

#comments_popup h1#header a {
color: #99FF66;
text-decoration: none;
}

#comments_popup h1#header a:hover {
background-color: transparent;
}

#comments_popup #main {
width: 100%;
}

#comments_popup #main p, #comments_popup #main h2, #comments_popup #main #commentlist {
margin: 0 10px 15px 10px;
padding: 0;
}

#comments_popup #footer {
background-color: #990000;
background-image: none;
width: 100%;
padding: 10px 0;
}

After some serious tinkering I finally got the text in the green boxes. Except now the side bar and comments are all off so I'll have to keep tinkering. Thanks for your help!!

Ok I need some help if any kind soul can. I finally got the side bar formatted and working properly. But now my entries and comments are off. My first entry is fine but the second entry the post title is there and then there is a HUGE space until the actual entry. I'm so confused because everytime I change the CSS thinking I fixed one thing it screws up another. Any help would be so gladly appreciated. I'm going crazy.

I'm not sure but try replacing "div.post_info" with "div.post" on all occurences, in your css.

Thanks! But I did that and it didn't change anything. I swear this is like a damn Rubix cube!!

post your css file as it stands currently and I'll see if I can help.

I noticed in your .right that you're missing a semi-colon ";" on the padding style.

And .left!

body {background: #FFF;
font: 12px "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

a, a:visited, a:link {color: #900;}

a:hover {text-decoration: none; background: #CF9;}

a:active {background: #CFF99;}

input, textarea {background: #FFF;}

input:focus, textarea:focus {background: #FFF;}

#wrapper {
margin: 20px auto;
width: 650px;
background: #900 url(images/bg_main.jpg) repeat-y;}

#head {
height: 273px;
width: 650px;
background: url(images/bg_head.jpg);}

#head div#blog_title {
color: #9F6;
position: relative;
top: 170px;
left: 20px;
font: 2em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

#head div#blog_title a {color: #9F6; text-decoration: none;}

#head div#blog_title a:hover {background: transparent;}

#main {
width: 425px:
float: left;
background: transparent;}

#main h1, #main h2 {
margin: 0px 20px 5px 47px;
color: #900;
font: normal 1.5em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

#main h2 {font-size: 1.5em;}

#main h1 a, #main h2 a {text-decoration: none;}

#main p, #main div.navigation, #main ul, #main div.post, #main div.date, #main #searchform, #main div.entry
{margin: 0 20px 15px 50px;
font size: 2.0em
font weight: normal
text-align: justify:
line-height: 1.4em;}

.post {padding: 0px 300px 0px 50px;}

.left {text align: left;}

.right {text align: right;}

#main div.post {
margin: 0 20px 15px 50px;
border-top: 1px dotted #6C0;}

#main div.date {
margin-bottom: 0;}

#sidebar {
float: right;
width: 220px;
margin: 20px 0 0 0;
padding: 0;
list-style: none;
background: url(images/bg_sidebar_main.jpg) repeat-y;}

#sidebar h4 {
margin: 0;
padding: 25px 0 14px 20px;
background: transparent url(images/bg_sidebar_head.jpg) no-repeat;
font: normal 1.3em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

#sidebar ul {
margin: 0;
padding: 0 0 40px 0;
list-style: none;
background: url(images/bg_sidebar_footer.jpg) no-repeat bottom left;}

#sidebar ul li {
background: transparent;
padding: 0 0 3px 30px;}

#footer {
width: 650px;
clear: both;
padding-top: 50px;
padding-bottom: 30px;
color: #9F6;
background: #900 url(images/bg_footer.jpg) no-repeat;}

#footer p {
margin: 0 50px;
font-size: 0.8em;
line-height: 1.5em;}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
color: #9F6;
background: transparent;}

#commentform {
margin-bottom: 40px;}

#commentform input, #commentform textarea {
width: 305px;
margin: 0 20px;
padding: 3px;
color: #FFF;
font: 1.0em/1.4em "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

#commentform input[type=submit] {
width: 13em;
float: left;}

#commentform label {
display: block;
padding-bottom: 3px;}

#commentlist {
margin: 0 20px 15px 50px;
padding: 0;
line-height: 1.4em;
list-style-type: none;}

#commentlist li {
padding: 0;
margin: 0 0 30px;}

#commentlist li p {
padding: 0;
margin: 0 3px 10px 3px;}

#commentlist cite {
display: block;
padding: 3px;
font-style: normal;
font-weight: bold;
margin-bottom: 3px;
background: #FFF;}

#searchform input[type=submit] {
margin-top: 2px;}

#comments_popup {
margin: 0;
padding: 0;
background: #FFF;
font: 12px "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

#comments_popup h1#header {
margin: 0 0 20px;
padding: 10px;
color: #360;
background: #FFF;
font: 2.5em "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;}

#comments_popup h1#header a {
color: #9F6;
text-decoration: none;}

#comments_popup h1#header a:hover {
background: transparent;}

#comments_popup #main {
width: 100%;
}
#comments_popup #main p, #comments_popup #main h2, #comments_popup #main #commentlist {
margin: 0 10px 15px 10px;
padding: 0;}

#comments_popup #footer {
width: 100%;
padding: 10px 0;
background: #900 none;

you're missing a couple of closing tags....

#main p, #main div.navigation, #main ul, #main div.post, #main div.date, #main #searchform, #main div.entry {
margin: 0 20px 15px 50px;
font size: 2.0em ;
font weight: normal;
text-align: justify ":" (wrong - should be ;
line-height: 1.4em;
}

your site looks fine now. what exactly do you require now?

Ok so the changes Katie had me make did some changes but if you scroll down to the second entry you get the title and then there is this HUGE space before the actual post. It didn't used to do that but started to once I changed the order of the php calls in the index in order to get the sidebar fixed.

post your sidebar.php in that case.

btw i'm viewing your site in firefox and it doesn't show any huge space :-S

Well then everyone must now use firefox!! =) I moved the php sidebar call because the sidebar wasn't going over to the right it was going underneath my entries.

Here is the sidebar php:
<!--
<div id="sidebar">
<img src="images/sp.jpg" width="95" height="75">
<div align="left">

• Painting Chef - Augusta, GA
• My endless quest for
• motherhood and the
• perfect 4-inch stilettos.
• With a little extra snark
• for good measure. This is
• where I keep my ramblings
• as they have gotten too
• numerous to store in my head

</div>