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

Recommended Answers

All 6 Replies

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>

hi ,
ataching a snap of output needed.

regards

Harish

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.

commented: gr8 and exactly as i was looking for. Thanks latinboy! +2

Hi latinboy,

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

Harish

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

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

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.