CODEWITHSUNDEEP
csshtml
BentCoder
BentCoder

Reputation: 12740

Expanding or collapsing parent div after positioning child divs

I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.

Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.

And this question "Make absolute positioned div expand parent div height".

Thanks

JSFIDDLE

enter image description here

CSS

#header
{
    margin: 0 auto;
    border: 1px solid #000000;
    width: 500px;
    background: #aa0000;    
}
#body
{
    margin: 0 auto;
    border: 1px solid #000000;
    width: 500px;
    background: #ff0000;    
}
#footer
{
    margin: 0 auto;
    border: 1px solid #000000;
    width: 500px;
    background: #dd0000;    
}

#section_one
{
    position: relative;
    width: 100px;
    height: 100px;
    background: #EEEEEE;
    top: 10px;
    left: 10px;
}
#section_two
{
    position: relative;
    width: 100px;
    height: 100px;
    background: #EEEEEE;    
    top: 10px;
    left: 150px;
}

HTML

<div id="header">HEARDER</div>

<div id="body">
    <div id="section_one">SECTION ONE</div>
    <div id="section_two">SECTION TWO</div>
</div>

<div id="footer">FOOTER</div>

Upvotes: 1

Views: 753

Answers (2)

Danield
Danield

Reputation: 125601

You could use float:left and then postion the sections with margin

FIDDLE

Markup

<div id="header">HEARDER</div>

<div id="body">
    <div class="section one">SECTION ONE</div> 
    <div class="section two">SECTION TWO</div>
    <div class="section three">SECTION THREE</div> 
    <div class="section four">SECTION FOUR</div>
</div>

<div id="footer">FOOTER</div>

CSS

.section
{
    width: 100px;
    height: 100px;
    background: #EEEEEE;
    float:left;
}
.two
{
    margin: 20px 0 0 10px;
}
.three
{
    margin: 80px 0 0 50px;

}
.four
{
    margin: 220px 0 0 -200px;
}

Upvotes: 1

avrahamcool
avrahamcool

Reputation: 14094

if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning. like this: http://jsfiddle.net/avrahamcool/JVh8e/1/

HTML:

<div id="cover">
    <div id="section_one">SECTION ONE</div>
    <div id="section_two">SECTION TWO</div>
</div>

CSS

#cover
{
    margin: 0 auto;
    padding: 5px;
    width: 500px;
    background-color: #000000;
}
#section_one, #section_two
{
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #EEEEEE;
}

as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.

also: use background-color instead of background (if you apply only the color)

Update this is the new fiddle (after your editing): http://jsfiddle.net/avrahamcool/JVh8e/5/

Update 2: check out this working example with script. http://jsfiddle.net/avrahamcool/JVh8e/6/

Upvotes: 1

Related Questions