jueves, 13 de diciembre de 2012

Three-Parts Screen with DIVs

This is my version for a three parts screens using DIVs with easy.

Tested on Chrome 23.0, Firefox 17.0.1 and iPod Touch / iPhone


<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>My three parts screen</title>
<style>
body {
font-family:Arial;
font-size:16px;
background:#ddd;
}
#wrapper {
width:auto;
margin:0px;
padding:0px;
border: 1px solid #ccc;
margin-right:5%;
margin-left:5%;
}
#left {
float:left;
width:20%;
background:#ccc;
}
#center {
float:left;
width:60%;
background:#444;
}
#right {
float:right;
width:20%;
background:#777;
}
#inner {
padding:10px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="wrapper">

<div id="left">
<div id="inner">This is left</div>
</div>

<div id="center">
<div id="inner">This is center</div>
</div>

<div id="right">
<div id="inner">This is right</div>
</div>

</div>
</body>
</html>