<html><head>
<style type="text/css">
body {
font-family:verdana;
font-size:12px;
margin: 0;
}
.parent_new {
border:1px solid red;
width:100%;
display: table;
border: none;
text-align: center;
}
.row_level
{
display:table-row;
}
.cell-level {
display:table-cell;
vertical-align:middle;
padding: 10px;
}
.left{
border-right:1px solid red;
border-bottom:1px solid red;
}
.right{
border-left:1px solid red;
border-bottom:1px solid red;
}
.clr { clear:both; }
.colsspan{
position:absolute;
left:0px;
right:0px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="parent_new">
<div class="row_level">
<div class="cell-level left">float left div here only static content
</div>
<div class="cell-level right">
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
</div>
</div>
<div class="row_level">
<div class="cell-level colsspan">float left div here only static content
</div>
</div>
<div class="clr"></div>
</div>
</body></html>
<style type="text/css">
body {
font-family:verdana;
font-size:12px;
margin: 0;
}
.parent_new {
border:1px solid red;
width:100%;
display: table;
border: none;
text-align: center;
}
.row_level
{
display:table-row;
}
.cell-level {
display:table-cell;
vertical-align:middle;
padding: 10px;
}
.left{
border-right:1px solid red;
border-bottom:1px solid red;
}
.right{
border-left:1px solid red;
border-bottom:1px solid red;
}
.clr { clear:both; }
.colsspan{
position:absolute;
left:0px;
right:0px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="parent_new">
<div class="row_level">
<div class="cell-level left">float left div here only static content
</div>
<div class="cell-level right">
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
float right div dynamic content here<br>
</div>
</div>
<div class="row_level">
<div class="cell-level colsspan">float left div here only static content
</div>
</div>
<div class="clr"></div>
</div>
</body></html>
No comments:
Post a Comment