http://www.joshuasciarrino.com/

I think the problem is near 'sidebar' but I just can't figure out how to make the left navigation look clean on my site. It's just a mess. If I write a long post title, the design looks like crap. Or if I use the Twitter Tools plugin, it's just like vomit on the screen.

/*
Theme Name: ClearPixels
Theme URI: http://www.themelab.com/free-wordpress-themes/
Description: A nice clear theme.  Design by <a href="http://www.ramblingsoul.com">Rambling Soul</a>.  Coded by <a href="http://www.themelab.com">Theme Lab</a>
Version: 1.0
Author: Theme Lab
Author URI: http://www.themelab.com/
*/

*{
	margin: 0px;
	padding: 0px;
}
a {
	color: #0EA2CC;
	text-decoration: none;
}
h1, h2, h3 {font-family:"Trebuchet MS", Verdana, sans-serif;}
h1 {font-size:26px;}
h2 {font-size:18px;}
h3 {font-size:16px;}
body {background:url(images/bg2.jpg) fixed center top; background-color:#ccc; font:12px Verdana, Arial, Helvetica, sans-serif;}
#wrap {width:950px; margin:0 auto 0 auto;}
#header {background:url(images/header.png) no-repeat; height:174px;}
#content {background:url(images/pagebg.png) repeat-y; padding:0 40px 0 40px;}
#right { float:right; width:610px;}
#right p {line-height:20px; margin-bottom:20px;}
#right a {border-bottom: solid 1px #0ea2cc;}
#right a:visited, active {border:none;}
#right a:hover {color:#000; border-bottom:solid 1px #000;}
h1 a, h2 a, h3 a, h4 a {text-decoration:none; border:none!important;}
.clear {clear:both;}
#sidebar {float:left; width:250px; background:url(images/sb2.jpg) left repeat-y;}
#sidebartop {background: url(images/sb1.jpg) left top no-repeat; height:10px;}
#sidebarbtm {background:url(images/sb3.jpg) left top no-repeat; height:9px;}
#sidebar ul {list-style:none; font:bold 14px "Trebuchet MS", Verdana, sans-serif; margin-bottom:15px;}
#sidebar li {display:block; height:36px; margin-bottom:2px;}
#sidebar a, #sidebar a:visited {
	display:block;
	background:url(images/menu1.jpg) right top no-repeat;
	padding: 10px 10px 0 40px;
	height: 26px;
	color:#999;
}
#right h2 {
	color:#014782; font:normal 18px "Trebuchet MS", Verdana, sans-serif;
}
#right h2 a {color:#014782}
#right h2 a:hover {color:#000; background:#ffffee; border:none;}
#sidebar a:hover {background:url(images/menu2.jpg) right top no-repeat; color:#333;}
#sidebar .current-cat a{background:url(images/menu3.jpg) right top no-repeat; color:#000;}
#sidebar h2 {
	display:block;
	background:url(images/sidebarh2.jpg) no-repeat;
	height:40px;
	padding:14px 10px 0 40px;
	color: #186185;
	text-transform:uppercase;
}
#footer {background:url(images/footerbg.png) no-repeat; height:62px;}

#sitename {
	display:block;
	float:left;
	width:210px;
	padding:15px 0 0 40px;
	text-align:center;
	color: #FFFFFF;
	font: normal 28px "Trebuchet MS", Verdana, sans-serif;
}
#sitename a{color:#fff;}
.caption {
	display:block;
	font: normal 12px Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	padding-top:30px;}

#sitename a .blue {
	color:#0F9EC8;
	font-style: italic;
}
#sitename a:hover {color:#0f9ec8;}
#sitename a:hover .blue{color:#9c6; font-family:Georgia; font-weight:normal;}

#nav {float:right; width:645px; padding:0 40px 0 0; height:134px;}
#breadcrumb { background:url(images/breadcrumb.jpg) center bottom no-repeat;
	padding:7px 40px 5px ;
	height: 18px;
	color:#999999; text-transform:uppercase;
	font: bold 16px"Trebuchet MS", Verdana, sans-serif;} 
#breadcrumb a.active {color:#000!important;}
#breadcrumb a{text-decoration:none; color:#999;}
#breadcrumb a:visited, breadcrumb a:active {color:#999;}
#breadcrumb a:hover {color:#333;}
#nav #search{
	padding-left: 475px;
	padding-top: 17px;
	height: 48px;
}
#nav #search .keyword{
	background: transparent url(images/search.png) no-repeat;
	height: 33px;
	width: 132px;
	padding: 10px 20px 0 10px;
	font-size: 12px;
	color: #999;
	border:none;
	overflow:hidden;
}
#header form {padding:0; margin:0;}
#topmenu { height:51px; font:bold 14px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase; padding-top:15px;}
#topmenu ul {list-style:none; padding-left:10px;}
#topmenu li {display:inline; margin-left:3px;}
#topmenu a, #topmenu a:visited {display:block; float:left; background:url(images/nav2.png) repeat-x; text-align:center; padding:5px 25px 0 25px; height:25px; color:#999999;}
#topmenu .current_page_item a {background:url(images/nav1.png) repeat-x; color:#333;}
#topmenu .current_page_item a:hover {background:url(images/nav4.png) repeat-x; color:#333;}
#topmenu a:hover {background:url(images/nav3.png) repeat-x; color:#fff;}
#featured {
	background:url(images/ftrdbox.jpg) no-repeat;
	height:150px;
	color:#00CCFF;
	margin-bottom:15px;
}
#featured div {
	padding:25px 10px 0 50px;
	height: 90px;
	font:normal 16px "Palatino Linotype", "Book Antiqua", Palatino, serif;

}
.ftd_btm {display:block; height:20px; padding:15px 5px 0 35px; background:url(images/ftrdlink.png)8px 12px no-repeat}
#featured a {color:#fff; border-bottom:none;}
#featured a:visited, #featured a:active{color:#E3F7FD;}
#featured a:hover { text-decoration:underline; color:#fff!important;}
.postbottom {background:url(images/postbttm.png) no-repeat; height:26px; margin-bottom:20px;}
.postbottom ul {list-style:none;}
.postbottom li {display:inline; margin:0!important; padding:0!important;}
.postbottom a, .postbottom a:visited, .postbottom a:active, .postbottom span{color:#fff; border:none!important; display:block; float:left; height:20px; padding:6px 5px 0 30px;}
.postbottom a:hover {color:#000;}
.permalink a, .permalink a:visited, .permalink a:active {background:url(images/ico_more.png)5px 5px no-repeat;}
.cats a{background:url(images/ico_cat.png)5px 5px no-repeat;}
.auth span{background:url(images/ico_usr.png)5px 5px no-repeat;}
.date span{background:url(images/ico_date.png) 5px 5px no-repeat;}
.comnts a{background:url(images/comment.png)5px 5px no-repeat;}

.post h2 {display:block; margin-bottom:15px;}
.post .description {display:block; font-size:12px; color:#999;}

.post blockquote {background:#eee url(images/quote.png) 5px 5px no-repeat; padding:8px 8px 0 35px; font:normal 14px "Palatino Linotype", "Book Antiqua", Palatino, serif; display:block; border: solid 1px #ddd; }

.post .extract { float:left; margin-right:10px; width:250px;}

.post ul {margin-left:25px;}
.post ol {margin-left:25px;}
.post li {padding:3px;}
.post .leftalign {display:block; padding:5px; background:#eee; margin:8px; float:left; border:solid 1px #ddd;}
.post .rightalign {display:block; padding:5px; background:#eee; margin:8px; float:right;border:solid 1px #ddd;}


/*tables and Forms */

#right table {
	width:90%;
	border:1px solid #0075A4;
	margin-bottom:20px;
	background: #E3F6FF;
	margin-top: 15px;
}
#right th {
	background:#0075A4;
	padding:5px 15px 5px 15px;
	color:#8ADBFF;
	text-align:center;
	border-bottom:1px solid #000000;
	font: bold 16px "Trebuchet MS", Verdana, sans-serif;
	text-transform: uppercase;
}
#right td {
	border-bottom:1px solid #0075A4;
	padding:5px 15px 5px 15px;
	border-right:1px solid #0075A4;
}


.textfield {
	display: block;
	width:50%;
	margin:3px 3px 3px 30px;
	padding:3px;
	border: 1px solid #CBE0E7;
	background: #E9F2F5;
}
label {
	display: block;
	margin:3px;
	padding: 5px;
	font-weight: bold;
}
.button {
	display: block;
	padding:0px;
	margin:3px;
	border: 1px solid #9DC6D2;
	color:#000000;
	background: #E9F2F5;
}
.textfield:hover {
	background:#FFFFCC;
}
.textfield:focus {
	background:#ffffff;
	border: 1px solid #3A2C1B;
}
.hide {display:none;}
#bottom {padding:20px; background:url(images/bottombg.png) repeat-x; margin-top:15px;}
#bottom p {display:block; padding:3px; text-align:center;}
#credits {text-align:right; font-size:10px; padding:5px 40px 0 40px; }
.pagenavi { height:22px; padding: 5px 5px 0 5px; background: #eee; border: solid 1px #ddd; margin:25px 0 15px 0;}
.pagenavi .alignleft {display:block; text-align:left;}
.pagenavi .alignright {display:block; float:right;}
.pagenavi a, .pagenavi a :visited, .pagenavi a :active {color:#000; font-weight:bold; text-decoration:none; border:none!important;}
.pagenavi a:hover {color:#0099CC!important;}

/*shopping Cart */
#catalogue {margin:10px 0 10px 0; background:#eee; border:solid 1px #ddd; padding:5px;}
.item {width:135px; float:left; height:220px;}
.item h3 {display:block; padding:3px;}
.item span {display:block; padding:3px;}
.item .price {color:#993300; font-weight:bold; }
.item span img {border:none!important;}
.item span a {border:none!important; text-decoration:none;}
.item img {}
img.productimg {border:solid 1px #716148; margin:0 0 0 8px;}
.clear2 {width:100%; clear:left;}
.sec_head {
	display:block;
	background: #0077A2 url(images/ftrdbox.jpg) no-repeat 0px -60px;
	padding:3px;
	margin-bottom:15px;
	color: #FFF !important;
}

/* Begin Comments*/
.alt {
	margin: 0;
	padding: 10px;
	background-color: #F7FBFF;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 3px;
	padding: 5px 10px 3px;
	list-style: none;
	}

.commentlist p {
	margin: 10px 5px 10px 0;
	}

#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}
/* End Comments */

img.avatar {float:left; margin-right:5px;}

Whoa, did you fix it or is it still messed up? Right now, all that appears out of order is your Twitter plug-in. It literally is spewing vomit to the screen. Or do you mean "when" you post past the bar it goes haywire?

Try adding a height value to #sidebar and see what it does. Make height like 1000px and see if the problem is still there. That could narrow it. I'm not used to troubleshooting CSS, so sorry if I'm kind of blunt and don't know what I'm doing, haha.

It literally is spewing vomit to the screen.

Yup!

The problem is yes...the Twitter stuff. But I don't want it to be. (I like Twitter and I think my blog could use some of my tweets to spice it up)

The problem also is, LONG TITLES. (If you look at the bottom under 'recent posts') You'll see that issue as well.

@pramser When I do what you said "height to 1000px" it's semi clean but still sucks. Actually really sucks. Lol [This was put with 'sidebar a']

This is what is looks like. 1 & 2

Then. When I try putting 'height to 1000px' to 'sidebar li'. It splits up each individual list item 1000px.

Give the "aktt_tweets" container element an entry in the style sheet and tell it what it should be doing.

Could you be a little more specific ...cause I'm screwing things up here.

What do I tell it to do? And how. *(New Coder here)*

<div class="aktt_tweets"> has no corresponding .aktt_tweets { } in the style sheet so it's properties are default (or inherited).

start off giving it a border so you can see where it is. Break the floats in that container after the <ul> (<br style="clear:both" />)
You should see it start to behave then.

start off giving it a border so you can see where it is. Break the floats in that container after the <ul> (<br style="clear:both" />)
You should see it start to behave then.

Can you be more specific than this? It's calling an external style sheet. So, I can't just plug that in, plus I'm not sure on how to achieve the same results.

This is what I have now.

.aktt_tweets ul {display:clear;
}

And it's obviously doing nothing.

Then I tried doing what the other code says for the side bar.

.aktt_tweets ul {display:block;
}
.aktt_tweets li {display:block;
                 height: 26px;
}

Yet, nothing happened....

setting your: #sidebar li {
to:

height: auto;

seems to work for me. This is just overriding something else though, so there's probably a better solution. In general, you don't need to set LIs height, unless you're using them like very defined blocks.

Better, but not quiet yet. Check it out.

A few more navigation issues:
1. Under 'recent posts'. If it's a long blog title, the words get stacked, how do I make the button expand?
2. Under 'what am i doing'. Every time I use the @ feature it sets it up inside of an image. Confusing the user [the @ sign is a common feature in twitter]. How do I block one twitter message together where it looks like 5 messages and not 25 messages that confuses the user.
3. Under 'tag cloud'. I'm trying to center it. It's disobeying. What am I doing wrong? What should I do?
4. Under 'recent comments'. The design seems jumbled.

If you have just one answer. I'd be happy. Cause I don't want to have to delete these widgets.

#3 is resolved.

remove the height: 26px from #sidebar a, that is causing one of your problems.

Thanks. That helped a little.

#2 and #3 are good. (I went around it.)

1. Under 'recent posts'. If it's a long blog title, the words get stacked, how do I make the button expand?
4. Under 'recent comments'. The design seems jumbled.

Weird. I didn't get a notification that you responded...

Either way. Just a few more glitches.

Actually that height:26px was to keep a nice design theme. When I took it out, it's like someone cut the bottom of each list item.