CODEWITHSUNDEEP
htmlcss
Ray
Ray

Reputation: 6115

css: body color not extending all the way down the page

I'm specifying a teal background color for the body of a page:

<body style="background-color: #0197B1">

This overrides a style sheet, and sure enough the teal appears, but not all the way down the page (both in Firefox and Chrome)

I add the following at the bottom:

 <br style="clear:both" />
  some text
 </body>

to attempt to resolve things and also debug what is occurring with the inline element at the bottom. It appears (Chrome developer tool) that the body does not go all the way down the page. Hmm ... why does this happen, what's the fix?

Page can be viewed at: http://www.momentumnow.co/testimonials

Thanks

Upvotes: 2

Views: 8342

Answers (4)

anglimasS
anglimasS

Reputation: 1344

I check Firefox only,

line 4: html{background-color:#ffffff; height:100% }

Just remove body

or

line 4: html,body{background-color:#0197B1; height:100% }

Upvotes: 1

Pranav 웃
Pranav 웃

Reputation: 8477

Remove html {background-color:#ffffff;} and you should be done.

Upvotes: 3

Rob Allen
Rob Allen

Reputation: 17749

When you float an element you are removing it from the document's flow. The page loses a sense of where and how large the element is.

You page is a series of nested tables with floated elements inside. The only thing providing actual vertical structure is the tables themselves. Your background is ended where the tables run out.

To recode this page would be easy for someone who was familiar with Standards-based, semantic markup. I would suggest learning those methods. In the meantime, @Christian Varga's solution will get you off for the time being.

Upvotes: 2

Christian
Christian

Reputation: 19750

Remove the height: 100%; property on the body (it's set in the CSS) and the background will fill the entire page. Also, as a friendly note, you shouldn't be using tables to design websites. It's very poor practice - what you want to do is easily achievable without tables.

Upvotes: 14

Related Questions