CODEWITHSUNDEEP
htmlcss
DJC
DJC

Reputation: 1173

Child expanding out of parent

I have some divs within a main_content div, but they do not slot in within their parent.

I have done my research and I have tried to float: left the parent, but unfortunately it ruins the curved edges and shadow, so something is clearly wrong.

Within the child divs I have a checkbox which when ticked, expands a panel of text, but the same issue is occuring whereby the divdoes not increase in size, it is being considered a seperate entity from what shouldbe it's child.

jsfiddle http://jsfiddle.net/aNgVj/

Here is the html

<div id="wrapper">
    <div id="main_content">
        <h1 class="standard">Team Directory</h1>
        <div class="plaque_left">
            <h2>Blackhawks</h2>
            <h3>EB Netball CLub</h3>
            <p>www.random.com</p>
            <p>More text</p>
            <p>and more...</p>
            <p>and more</p>
            <p>finally...</p>
                <input type="checkbox" name="show" id="show"/>
                <label for="show">Named Players</label>
                <article class="small">More content here
                    <br/>
                        <br/>and here
                        <br/>end
                </article>
        </div>
    </div>
</div>

And the linked CSS

#wrapper {
    background: white;
    position: relative;
    width: 77em;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid white;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0 0 40px black
}
#main_content {
    background: white;
    position:relative;
    width: 76em;
    height: 100%;
    margin-left: auto;
    margin-right: auto
}

and (just the left divs as code is the same for the right divs, other than float:right)

.plaque_left {
    display:block;
    height: 23.5em;
    margin: 1em 1em 1em 5em;
    padding: 0 1em 0 1em;
    background: white;
    -webkit-box-shadow: 0 0 10pt grey;
    float:left;
    width:38%;
    -webkit-border-radius:10pt
}
.plaque_left article {
    background:#d0a9f5;
    -webkit-border-radius: 10pt;
    overflow:hidden;
    height: 0px;
    position: relative;
    z-index:10;
    -webkit-transition: height 0.3s ease-in-out
}
.plaque_left input:checked ~ article {
    -webkit-transition: 0.5s ease-in-out
}
.plaque_left input:checked ~ article.small {
    height: 140px;
    position:relative
}

To confirm, the first issue is that the .plaque divs are not being contained by the #main_content div. Secondly when the checkbox expands to show the extra content, it spills outdie of the plaque div, unless I select auto which means I can scroll, but this is notwhat I am looking for, I want the plaque div to resize to allow for the expanded content.

Thanks in advance

Upvotes: 0

Views: 61

Answers (3)

Josh Taylor
Josh Taylor

Reputation: 532

Add an element such as a div which will clear the floats and keep them from collapsing. You can use this style:

.clearFloat{
    clear: both;
}

Then you can create an empty div at the bottom of your main content, that will clear (make room for) any elements above it. You can see the behavior in the fiddle below:

http://jsfiddle.net/aNgVj/1/

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

I suggest you add overflow: hidden to the #wrapper:

#wrapper {overflow: hidden;}

That's the easiest way to force the wrapper to enclose the floated items.

Upvotes: 1

helion3
helion3

Reputation: 37381

The plaque_left div isn't expanding in height because you have it fixed: height: 23.5em;. You can use min-height or remove the height entirely.

Upvotes: 2

Related Questions