CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9235

Why the left DIV not covering 100% height

I have the following code:

<div style="padding-top: 30px; text-align: center; position: relative;">
                    <div id="dvQuotes" style="min-height: 100px; border: 1px solid blue;">
                        <div id="dvOrangeLeftQuote" style="float: left; width: 18%; height: 100%; padding-right: 2%; background: #DDD; text-align: right;">
                            <img src="theImages/quoteOrangeLeft.png" />
                        </div>
                        <div id="dvOrangeQuote" style="text-align: left; width: 80%; font-weight: bold; color: #000000; font-size: medium; margin-top: 40px; margin-bottom: 40px; background: #6c6c6c;">
                            I have been blessed to be assisted by this group. Everyone in all positiong have treated my like family. My doctors are more than excellent, and I can't stop telling everyone about them.
                        </div>
                        <div id="dvOrangeRightQuote" style="padding-left: 2%; float: right; width: 18%; position: absolute; bottom: 0; right: 0; background: #7e75f2; text-align: left;">
                            <img src="theImages/quoteOrangeRight.png" />
                        </div>
                    </div>
                </div>

which displays:

enter image description here

This is what I am looking to do:

enter image description here

How can I achieve it?

UPDATE: when the blue border is removed, the alignment is messed up:

enter image description here

Upvotes: 0

Views: 128

Answers (4)

lehi_net
lehi_net

Reputation: 524

It's ok?

http://jsfiddle.net/55ZGm/

<div style="padding-top: 30px; text-align: center; position: relative;">
    <div id="dvQuotes" style="min-height: 100px; border: 1px solid blue;">
        <div id="dvOrangeLeftQuote" style="float: left; width: 18%; height: 100%; padding-right: 2%; background: #DDD; text-align: right;">
            <img src="theImages/quoteOrangeLeft.png" />
        </div>
        <div id="dvOrangeQuote" style="text-align: left; font-weight: bold; color: #000000; font-size: medium; margin-top: 40px; margin-bottom: 40px;margin: 40px 22%; background: #6c6c6c;">
            I have been blessed to be assisted by this group. Everyone in all positiong have treated my like family. My doctors are more than excellent, and I can't stop telling everyone about them.
        </div>
        <div id="dvOrangeRightQuote" style="padding-left: 2%; float: right; width: 18%; position: absolute; bottom: 0; right: 0; background: #d00; text-align: left;">
            <img src="theImages/quoteOrangeRight.png" />
        </div>
    </div>
</div>

Upvotes: 1

SVSchmidt
SVSchmidt

Reputation: 6557

Apply width:60%; and margin:40px auto 0 auto; to that #dvOrangeQuote. See: http://jsfiddle.net/Whre/zfSc2/

Upvotes: 0

Bokdem
Bokdem

Reputation: 464

The div containing the image will take 100% height of the image inside it. Try to change the 100% height from the 'quote-divs' to 100px as well.

Upvotes: 1

padarom
padarom

Reputation: 3648

You need to set a height for the parent element.

Right now you only set the min-height attribute. This is handled differently than the height attribute and therefore the child element won't know what 100 % height is supposed to mean.

See an example here.

Upvotes: 2

Related Questions