CODEWITHSUNDEEP
htmlcss
tckmn
tckmn

Reputation: 59283

"Expand down" HTML/CSS or alternative

Here is an SSCCE to show my problem:

<html>
    <head>
        <title>SSCCE for problem</title>
        <style type="text/css">
        h1 {font-size: 2em;}
        h5 {font-size: 1.3em; margin: 1em;}
        </style>
    </head>
    <body style="text-align: center;">
        <div style="background-color: #C0C0C0;">
        <div style="background-color: #B0B0B0; float:left; padding: 1em;"><h1 style="">Welcome to<br/><img src="http://www.oddllama.cu.cc/logo.png" alt="OddLlama Productions" 

title="Welcome to OddLlama Productions!"/></h1>This is some sample text.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in est non dui dictum eleifend. Proin tempor sodales odio, vitae laoreet orci vehicula blandit. 

Curabitur vitae tellus odio, nec vehicula leo. Nam ac urna nisi, eget molestie dui.</div>
        </div><br/>
        <span style="width: 25%; float: left; clear: left; background-color: #D0D0D0"><p>
            <h5>SOMETHING</h5>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>
        </span>
        <span style="width: 50%; float: left; background-color: #DDDDDD">
            <h1>SSCCE</h1>
            <p>This is an SSCCE.</p>
            <p>Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.<br/>Praesent in est<br/>non dui dictum eleifend.<br/>Proin tempor<br/>sodales odio,<br/>vitae 

laoreet orci<br/>vehicula blandit.<br/>Curabitur vitae<br/>tellus odio,<br/>nec vehicula leo.<br/>okay good enough.</p>
        </span>
        <span style="width: 25%; float: left; background-color: D0D0D0"><p>
            <h5>More stuff!</h5>
            <p>I'll just put a bunch of line breaks to take up space<br/><br/><br/><br/><br/><br/><br/><br/>okay good</p>
        </span>
        <p style="clear: both;"><br/>THIS IS A THING AT THE BOTTOM it is a footer yay footers are footery and footeriness is footy okay why am I typing this this is awkward but 

I must take up more space spaciness is spacey<br/><br/>okay good</p>
        <br/><div style="padding: 10px;"></div><hr/><div style="padding: 10px;"></div>
    </body>
</html>

And here is an image of how it renders:

http://i.imgur.com/4LFzV4I.png

How can I make the circled div that contains the text expand down so it is the same height as the one with the image? I placed them both in a common parent div, but no matter what attributes or styles I tried to use, it wouldn't expand down.

Is there an expand: down CSS thing, or some alternative that I can use to make my text expand downwards?

Upvotes: 1

Views: 1239

Answers (1)

VVV
VVV

Reputation: 7593

Unfortunately, there is no there is no expand:down attribute in CSS :) But you do have some alternatives. The most common solution for this is by using the .clearfix method.

When you float some children elements, the parent (container) doesn't take in effect the height of those floated children. That's where you need to add the clearfix class.

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

here's a fiddle

PS: it's compatible in very old IE versions too!

Upvotes: 1

Related Questions