div inside another div , actually over the bottom slice

[hbmarar]

hi,

Wishes.

This is part of code i would like to work it out.

<div >             
    <div id="titDiv"><?php echo $params->get('title');?></div>
    <div id="layer0" style="position: absolute; border: 1px; width: 200; height: 460></div>
<div id="Layer1" style="position:relative; width:136px; height:177px; z-index:1; left: 0px; top: 0px;"><img src="http://127.0.0.1/images/overlay.gif" width="630" height="35">
</div>

I want layer 1 at the bottom of the layer0 div , and also always relative to layer0. If we minimize the window or change the size of the layer0 div, layer1 should be relative to the change always not like abosute.

Anyone have any idea in this regard how to do it. I am gonna mad with these DIV's..

I request experts help with this ... :(

regards

Harish

[Lafinboy]

Not sure if I've understood your requirements correctly:rolleyes:

To 'fix' layer1 to the bottom of layer0 try this:

/* CSS */
#layer0 {
  background: red;
  width: 200px;
  height: 460px;
}

#Layer1 {
  position:relative;
  top: 100%;
  width:136px;
  height:177px;
  margin-top: -177px;
  z-index:1;
  background: blue;
}

<!-- HTML -->
<div id="layer0">
  <div id="Layer1"></div>
</div>

[hbmarar]

hi ,
ataching a snap of output needed.

regards

Harish

[Lafinboy]

The following should give you the structure for the layout.

/* CSS */
#titDiv {
  background: green;
  padding: 10px;
}

#titDiv p {
  float: left;
}

#layer0 {
  float: right;
  background: #fff;
  height: 460px;
}

#layer1 {
  position:relative;
  top: 100%;
  margin-top: -35px;
  width:630px;
  height:35px;
  z-index:1;
  background: blue;
}

/* easy clearing */

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

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<!-- HTML -->
<div id="titDiv" class="clearfix">
  <p>div #titDiv</p>
  <div id="layer0">
    <p>div #layer0</p>
    <div id="layer1">
      <img src="" />
    </div>
  </div>
</div>

Keep in mind though that any elements placed inside these divs will need to be floated to maintain the layout.

[hbmarar]

Hi latinboy,

You gave me the exact solution i was looking for and help me know something new on this. Thanks and regards

Harish

[hbmarar]

Hi latin,

Well when i added content to the div , on load it does fine but once content loading happends the bottom div is not seen. :(

why onload it worked fine and not later.. the layer1 dic loads fine at bottom of the layer0 but once the content gets in to the div layer0 layer1 div is not seen.

plz help me...again

[Lafinboy]

Would need to see the page as you have it to answer accurately.

Provide a link to the page, or attach as file.