Home/ Questions/Q 6153257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T20:03:58+00:00

<html><head><title>Test</title> <style> .main{width:600px;border:1px solid red; } .main .left{background:lightblue; width:100px;clear:both; float:left;} .main .right{margin-left:100px;background:lightyellow; } </style>

  • 0

alt text 

<html><head><title>Test</title>
<style>
.main{width:600px;border:1px solid red; }
.main .left{background:lightblue; width:100px;clear:both; float:left;}
.main .right{margin-left:100px;background:lightyellow; }
</style>
    </head><body>
<div class="main">
    <div class="left">
    title
    </div>
    <div class="right">
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
    </div>
</div>
</body></html>

How to change the CSS to make the page display like the dialog shows?

PS,I think it’s a way that to make the “left” div’s height auto expand when the height of the “right” div or parent div expand, but I don’t know how.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have a very simple solution. Use css attribute display: table-cell; in .left{} & .right{} style like this:

        .left, .right { 

         display: table-cell;
         width:100px; 
         vertical-align:middle; 
         text-align:center;

     }

    See the Demo: http://jsfiddle.net/rathoreahsan/qcCPG/3/

    • 0