CODEWITHSUNDEEP
htmlcss
andrew
andrew

Reputation: 488

How to make a div encompass everything

I have a program here at jsfiddle, and I am wondering how I am supposed to make the div go around everything. By going around everything I mean by having the border around everything. (Plus more effective jQuery code would be appreciated ;) .) Here is the code:

div {
    border:2px red outset;
}
div#container {
    width:50%;
}
div.section {
    position:relative;
    width:48%;
    display:inline;
    float:left;
}
    h3 {
    display:inline;
    width:48%;
    float:left;
    margin:0.65;
    text-align:center;
} a {
    display:inline;
    width:23%;
    float:left;
    margin:0.65%;
    text-align:center;
}

And my HTML :

<div id="container">
    <h3>Section 1</h3>

    <h3>Section 2</h3>
    <br />
    <br /> <a href="#sec1" class="hide">Hide</a><a href="#sec1" class="show">Show</a>
    <a href="#sec2" class="hide">Hide</a><a href="#sec2" class="show">Show</a>

    <div id="sec1" class="section">Some content</div>
    <br />
    <div id="sec2" class="section">Some more content</div>
</div>

Upvotes: 0

Views: 1029

Answers (1)

j08691
j08691

Reputation: 207913

Add overflow:auto to your container div:

div#container {
    width:50%;
    overflow:auto;
}

jsFiddle example

When you float the child, the parent essentially shrinks as the floated child is removed from the document flow. Adding the overflow rule restores the layout you expect. And your jQuery seems fine.

Upvotes: 5

Related Questions