Welcome to WebmasterWorld Guest from 54.226.130.194

Forum Moderators: not2easy

Message Too Old, No Replies

Faux column sometimes too short, sometimes too long

     

peterdouglas

1:45 pm on Jul 8, 2010 (gmt 0)

10+ Year Member



I don't do much web design these days, so debugging is a bit challenging. Someone else designed a site for me (I have no idea on how to reach him now). For some reason, he made a few pages with a faux column on the left, but the image is only as wide as the column (called sidebar). All of the tutorials I have read suggest making an image the spans the entire width of the page.

With my inexperience, if I try to change to an image than spans the entire width of the page, that will likely cause several more problems with the header, navigation bar, other pages without the faux column, etc. So I'd rather just fix this one. It used to work before I added more content to the main section of the page. Then the columns became too short, so I hacked it with non-breaking spaces. But now with more content, some columns are too short, and some are too long.

I validated the CSS and there are no errors. (the html also validates except for the statcounter and socialtwist code snippets I added in).

Here's the css code for pages that use a left column:

#sidebar {
width:210px;
float:left;
background:#FFF url("images/sidebar.gif") top center repeat-y;
height:2200px;
}

#sidebar h3 {padding-top:20px;}
#sidebar p {padding:10px 30px 5px 15px;}
#sidebar img {margin-left:10px;}


And the html: (unnecessary content like images for the logos and text have been removed for simplicity and anonymity).


<div id="sidebar">

<p>&nbsp;</p>

</div>


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Thank you in advance for any tips or suggestions! :)

peterdouglas

3:11 pm on Jul 8, 2010 (gmt 0)

10+ Year Member



I got it now, thanks! I had apply the background to the div#content by associating a class to it: <div class="contains_sidebar" id="content">