0

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

2
Contributors
6
Replies
7
Views
11 Years
Discussion Span
Last Post by Lafinboy
0

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>
0

hi ,
ataching a snap of output needed.

regards

Harish

Attachments div.GIF 3.15 KB
1

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.

Votes + Comments
gr8 and exactly as i was looking for. Thanks latinboy!
0

Hi latinboy,

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

Harish

0

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

0

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

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.