18 replies [Last post]
gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

Hi,

I have been playin around with css a bit, and I am a bit stuck on something I am assuming is rather trivial.

I have a header, and then a grey background below that (which covers the rest of the page). The next thing I want to do is to have a div which will span the remainder of the page (with a bit of padding on the left and right sides) where the background is white.

Kinda like a column where the actual content will go. The problem is I cant get the div to span the entire page. It stops where the text ends.

is there another way to do this?

thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Google "faux

Google "faux columns"

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

Hi Gary, Thanks for your

Hi Gary,

Thanks for your reply. I looked up faux columns, and I tried playing with the background repeat of the css for my div, but still no luck. Here is the related css code:

#main { width: 97.6%; height: 100%; float: left; padding: 20px 0 10px; margin: 0 10px 0 10px; background-color: white; background-repeat: repeat-y !important; }

I know that some of this css works, because if i change the background color, i see the change in my webpage...the width works as expected, I just cant get the height of the column to extend all the way to the bottom of the page.

The design of my webpage is a single column (i.e. the column I am having trouble with is the only one in question).

I took an old template, and I am trying to modify it for my needs...I can put what I have online if that helps.

Thanks!

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, this is just a guess,

hi,

this is just a guess, but did you try adding overflow:hidden to your main div?

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Read the article again. It

Read the article again. It requires a background image.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

sorry to keep bugging you

sorry to keep bugging you about this, I tried the same thing with an image, and I got the same results.

I have posted a very simplified version of what I am attempting: http://test.lambandtunafish.com/

and the css file can be found here: http://test.lambandtunafish.com/style.css

In the example I put online, I intentionally picked a picture that doesnt look right (they are little white page icons), so I could see the effect the repeat was having.

I keep getting the feeling that it is something small and stupid which I am missing...but alas, this is all very new to me.

Thanks!

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

did you mean

did you mean repeat-x????

you have written repeat-y... and it is repeating it.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

And did you try removing the

And did you try removing the repeat??

why do you need one??

when i remove the repeat, it works nicely...

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

Essentially, I want it to

Essentially, I want it to repeat in both directions, but I want the repeat to go all the way to the end of the page (i.e. a white stripe where the content is going down the entire page). However, when I view it in firefox, it only repeats about halfway down the screen.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, Remove the background

Hi,

Remove the background repeat property. That will work.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

I removed the repeat, and

I removed the repeat, and now the css looks like:

#main { /* my changes */ width: 97.6%; float: left; padding: 20px 0 10px; margin: 0 10px 0 10px; background: url('images/page_white.png'); }

however, the image does not repeat all the way down the entire page (I have updated the online version http://test.lambandtunafish.com/)

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

It is expanding till the

It is expanding till the text, and that is how it will be.

mihir. Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

I believe that Gary's

I believe that Gary's comment about faux columns is a trick that can make the background column expand all the way, unfortunately, i cant seem to get it to work.

Triumph (not verified)
Anonymous's picture
Guru

gmoniey wrote:I believe that

gmoniey wrote:
I believe that Gary's comment about faux columns is a trick that can make the background column expand all the way, unfortunately, i cant seem to get it to work.

Here's a clue from the faux columns article:
Quote:
The CSS

This elementary CSS rule is added to the body element:

You seem to have skipped over that part.

...and validate your code!

...and clean your room!

...brush your teeth!

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

thanks for clearing that

thanks for clearing that up...I think I seem to have got it...took some moving around of the css code...and I still need to create a white image for the background, but I think I got it....thanks again!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Would you like to post your

Would you like to post your latest code for us to have a quick look through, make sure it's all done right? Faux columns can be tricky to get to grips with Wink

Verschwindende wrote:
  • CSS doesn't make pies

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

Sure, here are the main css

Sure, here are the main css portions:

body {
font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #444;
background: #9b9b9b url('images/body_bg_785.png') repeat-y top center;
text-align: center;
margin: 0px;
}

#header {
height: 150px;
color: #fff;
background: #333 url('images/header_bg_785.gif') repeat-y top center;
text-align: left;
width: 784px; /* change back to 785 to widen */
margin: -150px auto;
}

#main {
width: 97.6%;
float: left;
padding: 20px 0 10px;
margin: 0 10px 0 10px;
}

You can see it in action here: http://test.lambandtunafish.com

thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Little bit of divitis and

Little bit of divitis and classitis but looking good Wink

Verschwindende wrote:
  • CSS doesn't make pies

gmoniey
Offline
Regular
Last seen: 13 years 40 weeks ago
Joined: 2007-11-05
Posts: 25
Points: 0

yea, I figured I am probably

yea, I figured I am probably not following the best html guidelines, but I just wanted to get it working for now.

Thanks again!