1

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>
Community
  • 1
  • 1
BentCoder
  • 12,257
  • 22
  • 93
  • 165

2 Answers2

1

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/

avrahamcool
  • 13,888
  • 5
  • 47
  • 58
  • Sorry. I updated the code and jsfiddle. Is there any change you can look into new one instead. Thanks. Also What I want is to make it flexible not only side by side. – BentCoder Sep 10 '13 at 08:31
  • You're making it side by side. I should be able to place child divs where ever I want in parent. Not only horizontal or vertical. – BentCoder Sep 10 '13 at 08:53
  • in this case, you can't make the cover stretch excactly to the desired size. unless you use a script that somehow adjust the height. I would recomend fixing a large height for the cover, hoping the child's dont overflow it. – avrahamcool Sep 10 '13 at 08:55
  • Image added above. Please check. – BentCoder Sep 10 '13 at 08:58
  • So what I want is not possible without jQuery, is it? – BentCoder Sep 10 '13 at 09:15
  • if by Jquery, you mean 'script' so: as far as i know. no. (because it can be done using pure JS) – avrahamcool Sep 10 '13 at 09:15
  • +1 Then I'll have to just go for it. Thank you for your time. – BentCoder Sep 10 '13 at 09:17
  • Sorry avrahamcool, I'll have to accept Danield's code because it works without JS however +1 remains same. I'll remember your solution too. – BentCoder Sep 10 '13 at 09:59
  • but that what I suggested before (using margin). you didn't want it for some reason.. weird. – avrahamcool Sep 10 '13 at 10:21
  • With that, I wasn't able to place child divs as I wanted. Look at the image I added to my original post above. Also reminder, I don't have enough knowledge to modify your code to adopt my exact needs. – BentCoder Sep 10 '13 at 12:09
  • As I said, I'll remember that JS part of the code which is useful to me. Thanks – BentCoder Sep 10 '13 at 12:32
1

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;
}
Danield
  • 121,619
  • 37
  • 226
  • 255