/    Sign up×
Community /Pin to ProfileBookmark

CSS Column Situation

Hey,

I am working on a website, and it is a two-column layout, but I need to enhance the left column. For reference, the website is [URL=”http://www.rentalnook.com”]RentalNook.com[/URL]. I want the left column of the front page (gray) to have a 50ish pixel gradient from gray to white on the left of the column. But currently it fills a 800×600 resolution screen. Is it possible to extend the left column in such a way to hide it from 800×600 but not from anything higher? I know its possible, you just have to make it not influence the main width so it doesn’t have to scroll horizontally. Any ideas? Thanks!

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@CentauriJun 03.2007 — As your wrapper is 800px wide, I would just make a 1 pixel high by 900 pixel wide graphic which would be white and have the 50px gradient on the left side - apply this as a background to the body, having it centered and repeated vertically.

Cheers

Graeme
Copy linkTweet thisAlerts:
@KillaH425authorJun 03.2007 — Thanks, but it won't go on the whole body, it can only go on the wrapper. Should I just make a parent wrapper with 100% width and have that image, and have the child wrapper 800px for the two columns? Do you think that will work?
Copy linkTweet thisAlerts:
@CentauriJun 03.2007 — Why can't it go on the body?

Rather than have a wrapper within a wrapper, you could just use the wrapper you have now with 50px wide side padding, and the background applied to it. BUT doing this, or using two wrappers, will increase the overall width and affect scrolling, which was what you were trying to avoid. A body background won't affect site width.
Copy linkTweet thisAlerts:
@KillaH425authorJun 03.2007 — It can't go around the body because the column doesn't span the whole height of the page. I mean I can try it, but there will be lots of spaces where it shouldn't be, and I'm trying to avoid the hassle of screwing up the CSS right now.
Copy linkTweet thisAlerts:
@CentauriJun 03.2007 — I assume you want the image to stop at the google ads ? If you take the footer out of the container div and place it after that, then you may be able to have the footer cover the body-applied gradient in the same way the header will. Even though the graphic would go the full height of the screen, the header and footer covering it will make it look like it goes the height of the column.
Copy linkTweet thisAlerts:
@KillaH425authorJun 03.2007 — But if the body is 900px, the banner and footer are stopped at 900px wide, where I want them to extend the whole width. Can I not put a width on the body?
Copy linkTweet thisAlerts:
@KillaH425authorJun 03.2007 — Hey,

Thanks for your help, I think I can finish it from here. The body having a width attribute would screw the whole thing up, but I got it to work. Thanks again.
Copy linkTweet thisAlerts:
@CentauriJun 03.2007 — ?? nowhere did I suggest putting a width on body, and it is NOT a good idea.

What you have done is what I had suggested, and seems to work well. The only suggestion I would have now, is to incorporate the left column background into the body background you have just done, and remove the background from the left column - this will make it [I]look[/I] like the left column takes up the available height when in fact it doesn't (known as "faux columns")

Cheers

Graeme
×

Success!

Help @KillaH425 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...