This repository has been archived by the owner on Mar 19, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfloat2columns.html
44 lines (39 loc) · 2.15 KB
/
float2columns.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout misto a due colonne :: Laboratorio CSS</title>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css' />
<link href="common/css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*{margin:0;padding:0}
#corpo{overflow:hidden;background:#efefef;padding:20px;line-height: 23px}
#main{float:right;width:100%;position:relative;z-index:5;right:240px;margin-right:-240px;}
#main #content{margin-left:240px;background:#e8747b;padding:20px;}
#sidebar{float:left;width:200px;position:relative;z-index:10;background:#84DBD4;padding:20px;}
</style>
</head>
<body>
<a id="logo" href="http://www.laboratoriocss.it" title="Laboratorio CSS" class="logo"><img src="common/img/structure/logoLabcss.png" alt="Logo laboratorio CSS" /></a>
<div id="container">
<div id="header">
<h1>Layout misto a due colonne</h1>
<p id="description">E’ abbastanza “semplice” affiancare due elementi se entrambi hanno la width espressa in pixel o in percentuale ma il discorso si complica in presenza di layout misti. </p>
</div>
<div id="content">
<!-- ESEMPIO -->
<div id="corpo">
<div id="main">
<div id="content">
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</p>
</div>
</div>
<div id="sidebar">
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>
</div>
</div>
<!-- //ESEMPIO -->
</div>
</div>
</body>
</html>