Member Avatar for 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

  • 2 Contributors
  • 6 Replies
  • 244 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Lafinboy

Dani AI

Generated

Short summary: wants the inner div to sit and stay anchored to the bottom of the outer div even after content loads. ’s top:100% + negative-margin trick works for a fixed-height box, but it’s brittle when content or images load later or when floats/stacking contexts change.

A robust CSS approach is to make the outer div the positioning context and absolutely anchor the inner div to its bottom:

#layer0 {
  position: relative;   /* makes this the containing block */
  /* set explicit sizes or let it size to content */
  overflow: visible;    /* avoid clipping if the overlay should sit over content */
}

#layer1 {
  position: absolute;
  left: 0;
  right: 0;             /* stretch if needed */
  bottom: 0;            /* always sit at the bottom of layer0 */
  z-index: 10;          /* raise above regular content */
  height: 35px;         /* match overlay image height */
}

Modern alternative (keeps the footer in normal flow and pushes it down as content grows): use flexbox on the parent and give the main content a flexible area:

#layer0 { display: flex; flex-direction: column; }
#content { flex: 1 1 auto; }   /* grows with content */
#layer1 { height: 35px; }      /* naturally sits at the bottom */

Troubleshooting checklist: ensure #layer0 is actually position: relative (otherwise absolute children position against an unexpected ancestor); check for collapsed parent heights when children are floated (use a clearfix or overflow:auto); avoid overflow:hidden on ancestors that would clip the overlay; give images explicit width/height to prevent layout shifts; and raise z-index if newly loaded content is covering the overlay. Using browser devtools to inspect computed box values and stacking contexts will quickly show which of these issues is occurring.

This complements ’s solution while handling dynamically loaded content and common layout pitfalls.

Recommended Answers

All 6 Replies

Member Avatar for 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>
Member Avatar for hbmarar

hi ,
ataching a snap of output needed.

regards

Harish

div.GIF 3.15 KB
Member Avatar for 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.

commented: gr8 and exactly as i was looking for. Thanks latinboy! +2
Member Avatar for 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

Member Avatar for 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

Member Avatar for Lafinboy

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.