CODEWITHSUNDEEP
htmlcss-position
parascus
parascus

Reputation: 1249

Problems with relative positioning with css

I'm trying to build a page with a big div in the middle which "lays" on to other divs on the left and on the right with the code at the end of the question. the three divs should be contained in a further div (called outer) and it's height should be (almost) exactly the height of the div in the middle. Because the height of the div in the middle is not fix this is true forthe outer div as well.

Trying to use relative positioning sets my middle-div below the ones on the left and the right. Setting th etop of the middle div leaves a blank area between the middle div and the lower border of the outer div. Using absolute positioning results in a collapsed outer div.

I would be greatful for any hint or advise.

parascus

<html>
<head>
<style type="text/css">
#outer {
   width:300px;
   border:1px solid #000000;
}

#left {
   position:relative;
   display:inline-block;
   float:left;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
}

#right {
   position:relative;
   display:inline-block;
   float:left;
   left:185px;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
   text-align:right;
}

#middle {
    background-color: #FBE6AD;
    display: inline-block;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    left: 50px;
    top: -48;
    width: 200px;
}
</style>
</head>
<body>
<div id='outer'>
<div id='left'>DIV Left</div>
<div id='right'>DIV Right</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
</div>
</body>
</html>

It should look like this:good example

But I get this: bad example

Or this: worse result

The solution (triggered by fenix) was:

<html>
<head>
<style type="text/css">
#outer {
    border:1px solid #000000;
    display:inline-block;
    width:300px;
}

#x {
    display:table-row;
}

#left {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px -5px 0px 3px;
    width:50px;
    border:1px solid #C08080;
    padding:0px;
}

#right {
    background-color: #c0c0c0;
    position:relative;
    display:inline-block;
    float:left;
    margin:3px 3px 0px -5px;
    width:50px;
    border:1px solid #C08080;
    text-align:right;
}

#middle {
    background-color: rgba(250, 220, 200, 0.8);
    display: inline-block;
    float:left;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    width: 200px;
    margin:3px 0px 6px 0px;
    z-index:10;
}
</style>
</head>
<body>
<div id='outer'>
<div id='x'>
<div id='left'>DIV Left</div>
<div id='middle'>
DIV Middle<br>
with an<br>
unknown height<br>
which has effect on the outer height.
</div>
<div id='right'>DIV Right</div>
</div>
</div>
</body>
</html>

This ends in: enter image description here

Upvotes: 0

Views: 3926

Answers (2)

fenix
fenix

Reputation: 164

Have you considered a table with three cells in one row? Not entirely sure what the content will be, but that might be an alternate route?

Would this be on only one page? Or across multiple pages? If across multiple pages then you could utilize a Master page with the relevant styling reflecting ContentPlaceHolders?

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

The purpose of position:relative is to set the origin point for absolutely-positioned children elements.

Therefore, only the outer element needs position:relative, the inner elements need position:absolute (along with top, left or bottom, right positioning).

Absolutely-positioned elements are also removed from the layout flow, so inline-block and float should be removed since it has no layout context.

Give this a try:

#outer {
   width:300px;
   border:1px solid #000000;
   position:relative; 
   min-height:200px 
}

#left {
   float:left;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
}

#right {
   float:right;
   left:185px;
   margin:3px;
   width:50px;
   border:1px solid #C08080;
   text-align:right;
}

#middle {
    background-color: #FBE6AD;
    overflow: hidden;
    position: absolute;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    left: 50px;
    top: 0;
    width: 200px;
}

Upvotes: 2

Related Questions