Can't get block of color at bottom of page

Can't get block of color at bottom of page
0

#1

I’m trying to put my first website together and i’m having trouble creating a div so I can have a block of colour to rest at the bottom of the page. I make a div (called “bottom”) below my images and the text is at the bottom but the blue block is near the top and i’m not sure why.


#2

You assigned css class .bottom{} a height of 100px.


#3

Thanks for the reply, i’m looking to get the blue bar at the bottom of the web page. 100px is how big i’d like it to be. Apologies if i’ve misunderstood your reply.


#4

You were clear.

The issue is divs have float property. The bottom class will need to restore the normal page flow to prevent it from wrapping to the top of the divs.

.bottom {
  // your code 
  clear: both;
}

Read this article on floats for additional information. Look for the sub-heading “Clearing & Containing Floats”.