Question

Hi I have three questions regarding this code,

http://jsfiddle.net/pJMva/125/

1) why the div with black background not covering the div with red background?[done]

2)why is the text going outside the div its contained in?[done]

3) how do I make the image and text in the third div center and vertically middle aligned[couldnt find an answer for vertical alignment]

4) how do I make the black background cover 100% width as well as height …. width: 100% works but height: 100% doesnt?

Answer 1

1) why the div with black background
not covering the div with red
background?

Because you haven’t cleared your floats. One way to clear your floats is to add overflow: hidden to #black.

See: http://jsfiddle.net/pJMva/108/ (I made your text white for visibility)

A good article to explain floats: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

2)why is the text going outside the
div its contained in?

The div is not wide enough to contain the text (assuming that your window is reasonably narrow). You can force the text to wrap by adding word-wrap: break-word to #fl_dv.

See: http://jsfiddle.net/pJMva/109/

3) how do I make the image and text in
the third div center and vertically
middle aligned

As suggested by @faraz, see: http://css-tricks.com/vertically-center-multi-lined-text/

Something like: http://jsfiddle.net/pJMva/127/

4) how do I make the black background
cover 100% width as well as height
…. width: 100% works but height:
100% doesnt?

You need to set height: 100% on all parent elements of #black to make height: 100% work:

html, body {
    height: 100%
}

http://jsfiddle.net/pJMva/128/