Web Design Forum: BrownWarrior - Viewing Profile - Web Design Forum

I'm trying to make a layout that has 3 layers and for all three layers to stretch as the top layer content increases or decreases. To add to the complexity I would like the top and bottom layers to have padding. At the moment the padding is adding to the height of the div and making the top and bottom layers oversized. Is there a way I can fix this?

Here is a test case I have made to illustrate the problem. The bottom layer is translucent orange with top and bottom padding 25px, the middle layer has a margin and borders on the sides, the top layer has top and bottom padding of 50px and bgcolor translucent yellow.

http://www.duncangra...Home/LayoutTest

here is the css

        .con  
        {
            position:relative; 
            width:200px; 
            height:250px;
            background:white;
            
        } 
        
        .topLayer, .middleLayer, .bottomLayer 
        { 
            position:absolute; 
            width:inherit; 
            height:inherit; 
            
        } 
        
        .topLayer  
        {
            z-index:3; 
            padding:50px 0px 50px 0px; 
            background-color:hsla(60, 100%, 50%, 0.3);
            background-clip:content-box;
        } 
        
        .middleLayer  
        {
            z-index:2; 
            margin:0px 20px 0px 20px; 
            border-left: #000 4px solid; 
            border-right: #000 4px solid;
            width:160px; 
        } 
        
        .bottomLayer  
        {
            z-index:1;
            padding:25px 0px 25px 0px; 
            background-color:hsla(30, 100%, 50%, 0.7);
            background-clip:content-box; 
        }

here is the html

<div class="con">
    <div class="topLayer"></div>
    <div class="middleLayer"></div>
    <div class="bottomLayer"></div>
</div>

Edit: I think I have found the answer to the padding/hight sizing problem... box-sizing:border-box;

But how do I get the bottom and middle layers to stretch as the top layer grows with content?
Thanks for your help

Hi,

I am trying to absolutely position a Div inside a Td of a table. It works fine in IE, Chrome and Opera but not FF or Safari.

The technique I am using is to apply position:relative to the Td parent element and position:absolute to the div.

here is my test case...

http://www.duncangra...PositioningTest

the red rectangle is supposed to appear at the bottom of each large Td but instead appears at the bottom of the page.

Can I fix this?

Thanks,

Hey,

When hovering over a <tr> element in a table I'd like to apply styles to the next <tr> element in the table?

<table>
    <tr class="hoverTr">
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
    </tr>
    <tr>
        <td colspan="3">change styles of this row</td>
    </tr>
    <tr class="hoverTr">
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
    </tr>
    <tr>
        <td colspan="3">change styles of this row</td>
    </tr>

</table

so whenever a table row of class="hoverTr" is hovered over by the mouse I'd like to change the styles of the next row.

How do I do this? Can it be done with pure CSS? Is there a pseudo selector for this?

Thanks,