That 100% height thing again . . .

I try to avoid 100% height. Maybe I'm going at this wrong, but have an existing tabled layout I'm trying to convert without visual change.

Scenario:

----- bunch of content here, then --------------
------------------------------------------------
----- a "Box" with graphic borders -------------
----- in the vertical middle of the -----------
----- graphic borders are two graphics --------
<--------------------- HERE ------------------->
----- that must stay in the --------------------
----- approximate visual "middle" --------------
----- of variable content ----------------------
------------------------------------------------

Never know how much content, must resize with zoom or text change.

I know about parent height having to have a 100% height. But I think . . . I'm up against the height of the viewport. This is verified by setting body height to 200%. Which of course won't work.

Is there a better way? Of course tables behave fine, like the Apollonian structures they are . . . ptooey.

The code demonstrates the mess I've gotten into. Borders for clarification only.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Vertically center div in side divs</title> 
<style type="text/css"> 
 /* without it, side boxes containing side borders won't go to 100% height */ 
 body,html { height:100%; } 
 #outer-div { width: 100%; height:100%; border: 1px solid #ff0000; } 
 #left-vert { float:left; width: 27px; height:100%; border: 1px solid #0000ff; } 
 #right-vert { float:right; width: 27px; height: 100%; border: 1px solid #0000ff; } 
 #left-vert div, 
 #right-vert div {  
 width:27px;  
 height:100px;  
 position:relative;  
 top:50%;  
 border:1px solid #000;  
 } 
 .clear-div { clear:both; } 
</style> 
</head> 
<body> 
 <div id="outer-div"> 
 <div id="left-vert"><div></div></div> 
 <div id="right-vert"><div></div></div> 
  <p> list</p><p> list</p><p> list</p><p> list</p><p> list</p><p> list</p> 
  <p> list</p><p> list</p><p> list</p><p> list</p><p> list</p><p> list</p> 
  <p> list</p><p> list</p><p> list</p><p> list</p><p> list</p><p> list</p> 
  <p> list</p><p> list</p><p> list</p><p> list</p><p> list</p><p> list</p> 
  <div class="clear-div"></div> 
 </div> 
</body> 
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Vertically center div in side divs - table version</title>
<style type="text/css">
#main, #content,
#list-table{ min-width: 700px; max-width:1020px; width: 100%; padding:0; }
#main{ width: 98%; margin: 0 auto 0 auto; border:1px solid #000; }
#content{ border:1px solid #ff0000; }
#lt-border-top,#rt-border-top,
#lt-border-bot,#rt-border-bot,
#lt-graphic,#rt-graphic{ font-size:2px; width: 27px; }
/* these are actually IMAGES */
#lt-border-top{ background:#ffff00; }
#rt-border-top{ background:#992626; }
#lt-border-bot{ background:#992626; }
#rt-border-bot{ background:#ffff00; }
#lt-graphic{ height:27px; background:#16dee9; }
#rt-graphic{ height:27px; background:#50bf40; }
</style>
</head>
<body>
<div id="main">
<div id="content">
Content above goes here
Content above goes here
Content above goes here
Content above goes here
Content above goes here
Content above goes here
</div> 
<table id="list-table" cellspacing="0">
<tr>
<td id="lt-border-top"> </td>
<td id="list-content" rowspan="3">
 list list list list list list
 list list list list list list
 list list list list list list
 list list list list list list
</td>
<td id="rt-border-top"> </td>
</tr>
<tr>
<td id="lt-graphic"> </td>
<td id="rt-graphic"> </td>
</tr>
<tr>
<td id="lt-border-bot"> </td>
<td id="rt-border-bot"> </td>
</tr>
</table>
</div> 
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Vertically center div in side divs</title>
<style type="text/css">
/* without it, side boxes containing side borders won't go to 100% height */
html { height:100%; }
body { height:100%; }
#outer-div { width: 100%; min-height:100%; border: 1px solid #ff0000; }
#left-vert { float:left; width: 27px; margin-top:30%; height:100px; border: 1px solid #0000ff; }
#right-vert { float:right; width: 27px; margin-top:30%; height:100px; border: 1px solid #0000ff; }
#mid-content { float:none; width:auto; margin:0 27px; border:1px solid green; }
.clear-div { clear:both; }
</style>
</head>
<body>

<div id="top-content">
Content above goes here 
Content above goes here 
Content above goes here 
Content above goes here 
Content above goes here 
Content above goes here
</div>

<div id="outer-div">
<div id="left-vert"></div>
<div id="right-vert"></div>
<div id="mid-content">
 list list list list list list
 list list list list list list
 list list list list list list
 list list list list list list
</div>
<div class="clear-div"></div>
</div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
     Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>position absolute rocks</title>
    <style type="text/css">
      * { 
        margin: 0;
        padding: 0; 
      }
      body { 
        min-width: 700px; 
        max-width: 1020px;
        width: 98%;
        margin: 0 auto; 
        border:1px solid #000; 
      }
      #content { 
        border:1px solid #ff0000; 
      }
      #list {
        position:relative;
      }
      #list ul { 
        margin: 0 27px; 
      }
      #tl,#tr,#bl,#br,#mr,#ml {
        width: 27px; 
        position:absolute;
      }
      #tl { 
        background:#ffff00; 
        left:0; 
        top:0; 
        bottom:50%;
        /* if needed a bottom margin could be applied 
          to avoid an overlap if that's needed for your 
          graphics
        */ 
      }
      #tr { 
        background:#992626; 
        right:0; 
        top:0; 
        bottom:50%;
      }
      #bl { 
        background:#992626; 
        left:0; 
        bottom:0; 
        top:50%;
      }
      #br { 
        background:#ffff00; 
        right:0; 
        bottom:0; 
        top:50%;
      }
      #ml { 
        height:27px; 
        background:#16dee9; 
        left:0; 
        top:50%; 
        margin-top:-14px; /* half the height */
      }
      #mr { 
        height:27px; 
        background:#50bf40; 
        right:0; 
        top:50%; 
        margin-top:-14px; /* half the height */
      }
    </style>
  </head>
  <body>
    <div id="content">
      <p>Content above goes here</p>
      <p>Content above goes here</p>
      <p>Content above goes here</p>
      <p>Content above goes here</p>
      <p>Content above goes here</p>
      <p>Content above goes here</p>
    </div> <!-- end content div -->
    <div id="list">
       <div id="tr"></div>
       <div id="br"></div>
       <div id="tl"></div>
       <div id="bl"></div>
       <div id="ml"></div>
       <div id="mr"></div>
       <ul>
         <li>list</li>
         <li>list</li>
         <li>list</li>
         <li>list</li>
         <li>...</li>
         <li>list</li>
       </ul>
     </div>
   </body>
</html>

That 100% height thing again . . .

rocknbil

limbo

rocknbil

rocknbil

rocknbil

TheMadScientist

TheMadScientist

rocknbil

TheMadScientist

rocknbil

swa66

rocknbil

rocknbil

swa66

rocknbil

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week