Create a "table" with <div>
I would like to generate a view below <div>. Limitations:
- full size = 100%
- first + second column = 50%, third + fourth column = 50%
- the first column is smaller than the second, the second is the "rest of the place", the same for columns 3 and 4 :)
- 3 rows, combines 2 cells
- last row combines 4 cells
- don't worry about color :)
PS: no discussion table against div; -)
+3
3 answers
Here is my suggested markup:
<div class="row">
<div class="col half">
<div class="col narrow">(1)</div>
<div class="col remainder">(2)</div>
</div>
<div class="col remainder">
<div class="col narrow">(1)</div>
<div class="col remainder">(2)</div>
</div>
</div>
<div class="row">
<div class="col half">(3)</div>
<div class="col remainder">(3)</div>
</div>
<div class="row">
(4)
</div>
And styles:
/* structure */
.row { clear: both; overflow: hidden; }
.col { float: left; }
.half { width: 50%; }
.narrow { width: 30%; }
.remainder { float: none !important; overflow: hidden; }
/* skin: just for demo */
.row { text-align: center; border-bottom: 1px solid #999; }
.half { background: #fcc; }
.narrow { background: #ccf; }
.remainder { background: #cfc; }
. : narrow . 30% ( : 30% ). remainder . , , .
( ), .
jsfiddle: .
+2
, TABLE, DIV. , Borders, . ( )
<style type="text/css">
.wrapper { width:100%; background-color:#ddd; text-align:center; float:left;}
.quarter-row { width:25%; background-color:#bbb; float:left; }
.half-row { width:50%; background-color:#999; float:left; }
.full-row { width:100%; background-color:#777; float:left; }
</style>
<div class="wrapper">
<div class="quarter-row">1</div><div class="quarter-row">2</div><div class="quarter-row">3</div><div class="quarter-row">4</div>
<div class="half-row">1 (50% width)</div><div class="half-row">2 (50% width)</div>
<div class="full-row" >1 (100% width)</div>
</div>
0
Here try the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
div.row { width: 99.9%; border: 1px solid black; height: 1em;}
div.cell2 {border: 1px solid black; height: 1em; width: 49.9%; float: left;}
div.cell4 {border: 1px solid black; height: 1em; width: 24.9%; float: left;}
</style>
</head>
<body>
<div class = "row">
</div>
<div class = "row">
</div>
<div class = "cell2"></div><div class = "cell2"></div>
<div class = "cell4"></div><div class = "cell4"></div> <div class = "cell4"></div><div class = "cell4"></div>
</body>
</html>
The style is in the header, but it really should be in the CSS proper file.
0