homepage Welcome to WebmasterWorld Guest from 54.205.52.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Faux column sometimes too short, sometimes too long
peterdouglas




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

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




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

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">

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved