Ok, I have a problem with my boxes. I am making a blog currently but I
don't think I am implementing my boes correctly.
My website is www.ryanfairchild.com.
Currently it looks fine as the sider bar is to the right and in place
however if I post a topic with a long name then the box where the
sidebar is displays recent topics, but if the topic is too long then it
wraps underneath the main content box and throws off the whole scheme.
I cam up with a solution since I am using MoveableType. I take the
title and trim it 25 characters so that the topic is not so long, but I
know there is a way with CSS to just wrap the text in the box and then
indent it or something. This is my current CSS:
body {
background:#000;
margin:0;
padding:10px 0 14px;
font:x-small Helvetica,Arial,Verdana,Sans-serif;
text-align:center;
font-size/* */:/**/small;
font-size: /**/small;
}
textarea[id="comment-text"] {
width: 80%;
}
img {
border:0;
}
/*
Links
----------------------------------------------------------*/
a:link {
font-weight: bold;
color:#E00067;
text-decoration:none;
}
a:visited {
font-weight: bold;
color:#E00067;
text-decoration:none;
}
a:hover {
font-weight: bold;
color:#999;
text-decoration:none;
}
/*
Boxes
----------------------------------------------------------*/
#container {
background:#000;
width:700px;
padding:0;
margin:auto;
text-align:left;
}
#top-rounding {
background:#000
url("http://www.ryanfairchild.com/images/top_container.jpg") no-repeat
bottom;
padding-top:50px;
margin:0 0 0 0;
width:100%;
}
#banner {
background: #999
url("http://www.ryanfairchild.com/images/header_banner3.jpg")
no-repeat;
width:100%;
height:400px;
}
#main {
background:#fff;
width:100%;
font-size:85%;
}
#content {
width:450px;
float:left;
color:#000;
padding:0px 20px 0px 20px;
margin:0;
}
#comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;
border-right: 1px dotted #BBB;
}
#sidebar{
float:left;
padding:0px 20px 0px 20px;
margin: 0;
color:#999;
text-transform:lowercase;
}
#bottom-rounding{
background:#000
url("http://www.ryanfairchild.com/images/bottom_container.JPG")
no-repeat top;
padding-bottom:43px;
margin:0;
width:100%;
}
/*
Classes
----------------------------------------------------------*/
#content blockquote {
line-height: 150%;
}
#content li {
line-height: 150%;
}
#content h3 {
color: #999;
font-family: Helvetica,Arial,Verdana,Sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}
#content h2 {
color:#999;
text-transform:lowercase;
}
#content p.posted {
font-family: Helvetica,Arial,Verdana,Sans-serif;
font-size: x-small;
border-top: 1px solid #999999;
text-align: left;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
}
#sidebar h2{
text-transform:lowercase;
color:#999;
margin-bottom:5px;
}
#sidebar ul {
margin-bottom:10px;
padding-left:15px;
list-style:none;
}
#siderbar li{
margin-bottom:5px;
}
..photo {
text-align: left;
margin-bottom: 20px;
}
..link-note {
font-family: Helvetica,Arial,Verdana,Sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
padding:0;
margin-bottom: 15px;
}
..commenter-profile img {
vertical-align: middle;
border-width: 0;
}
/* Misc
----------------------------------------------- */
..clear {
background:#fff;
clear:both;
display:block;
margin:0;
padding:0;
font-size:1px;
}
To see how this is all implemented it to use the Web Developer plugin
for Firefox and just display block ID & classes.
It will show you how this is all setup.
Please, I would greatly appreciate someone to look at this and give me
a suggestion. And maybe tell me how sloppy my CSS is at the same time.
That's alot to ask I know but I am sure I can help whoever in reutrn.
