divs naast elkaar in css
Quote:
Heeft niets met php te maken.
Topic verplaatst naar Webdesign.
SanThe.
Topic verplaatst naar Webdesign.
SanThe.
Gewijzigd op 01/01/1970 01:00:00 door Willem van weesenbeek
Daar kan je voorbeeldtekst mee creëren om te kijken hoe je layout met tekst eruit komt te zien. Je zult zien dat deze netjes binnen de DIV blijft, aangezien hij split op kleine woorden.
zie website
Vb: http://paradox-productions.net/projects/divsnaastelkaar/divsnaastelkaar.html
Code (php)
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
45
46
47
48
49
50
51
52
53
54
55
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
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css divs naast elkaar</title>
<style type="text/css">
body {
color: #222;
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Arial, Helvetica, sans-serif;
font-size: 12px;
}
div.container p {
padding: 10px 5px;
line-height: 20px;
}
div.container {
width: 1000px;
margin: 5px auto;
border: 1px solid #AAA; /* VOOR DUIDELIJKHEID */
background: #EEE; /* VOOR DUIDELIJKHEID */
}
div.leftcontent {
width: 300px;
margin: 0px; /* RESET CSS */
padding: 0px; /* RESET CSS */
float: left;
background: #CCC; /* VOOR DUIDELIJKHEID */
}
div.rightcontent {
width: 700px;
margin: 0px; /* RESET CSS */
padding: 0px; /* RESET CSS */
float: right;
background: #DDD; /* VOOR DUIDELIJKHEID */
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="leftcontent">
<h2>Lipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis condimentum imperdiet. Quisque mattis euismod aliquet. Curabitur pellentesque lacus sit amet ante luctus adipiscing. Aliquam ultricies consequat neque, eget rhoncus enim facilisis ut. Fusce lobortis vulputate purus vitae scelerisque. Nunc nulla est, mattis quis pharetra vitae, consectetur sagittis tellus. Donec in mi non enim venenatis egestas non et felis. Nunc consectetur nisi ut purus lacinia sit amet varius tellus consectetur. Integer tristique, tortor sit amet tincidunt gravida, tellus felis euismod sem, vitae mollis ligula est ut erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tellus ante, dapibus ac fermentum vitae, posuere non purus. Nulla dignissim pretium lectus, quis blandit turpis ornare quis. Proin vitae massa quis nulla mollis vestibulum. In nisl mauris, faucibus quis scelerisque eu, auctor pretium tellus. Pellentesque vitae quam quis eros scelerisque iaculis id sed turpis. Fusce non ante vel quam scelerisque iaculis.</p></div>
<div class="rightcontent">
<h1>Lipsum</h1>
<p>Integer a quam sit amet est scelerisque euismod et sit amet mi. Aliquam nulla nisi, tincidunt sodales fringilla in, facilisis eget mauris. Etiam sit amet mi nisl. Morbi aliquet ligula vel sem ultrices condimentum non nec nunc. Pellentesque non tortor augue, in sodales tellus. Donec eu consequat dolor. Integer dictum erat ut augue elementum pellentesque. Duis sem metus, laoreet ut euismod sit amet, mollis et diam. Duis vel ligula in dolor tincidunt posuere in quis massa. Etiam mollis mi a risus consequat eu accumsan odio pretium. Suspendisse hendrerit luctus turpis, quis facilisis nibh interdum in. Sed a arcu quis tortor semper ornare. Nulla vel lorem orci. Praesent placerat odio et purus blandit aliquet.</p>
<p>Etiam volutpat, risus id sagittis ultrices, enim eros blandit nulla, vitae placerat velit nisl non libero. Aenean ut risus sapien. Etiam condimentum velit quis nisi malesuada ultricies. Proin nec rutrum mauris. Pellentesque in eros non mauris placerat rutrum at sed nisl. Vivamus rutrum suscipit risus vel tincidunt. Vivamus tristique metus a nunc vehicula condimentum. Fusce purus lorem, mattis at sodales eu, gravida feugiat est. Quisque dignissim lacus vel magna aliquam ultrices. Sed ornare posuere tortor id semper. Suspendisse ullamcorper, metus quis dapibus placerat, nisl lorem auctor metus, vel fermentum velit ante nec nisl. Vivamus porta arcu eu eros feugiat a feugiat arcu blandit.</p>
<p>Quisque sed turpis eget odio scelerisque porttitor. Morbi id placerat libero. Quisque metus est, dictum a congue facilisis, faucibus in sem. Etiam felis ante, vulputate vel convallis et, hendrerit quis neque. Phasellus condimentum placerat nunc quis vehicula. Praesent rhoncus quam sed mi pretium non aliquam est euismod. Integer et interdum nulla. Ut et velit id turpis eleifend pellentesque condimentum ut velit. Mauris sollicitudin ultrices justo, ac euismod ante malesuada nec. Aliquam malesuada est vel eros mattis convallis. Quisque mattis sollicitudin blandit. Donec ornare posuere purus, eget luctus purus imperdiet sit amet. Ut ac mi orci, a mattis lorem. </p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css divs naast elkaar</title>
<style type="text/css">
body {
color: #222;
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Arial, Helvetica, sans-serif;
font-size: 12px;
}
div.container p {
padding: 10px 5px;
line-height: 20px;
}
div.container {
width: 1000px;
margin: 5px auto;
border: 1px solid #AAA; /* VOOR DUIDELIJKHEID */
background: #EEE; /* VOOR DUIDELIJKHEID */
}
div.leftcontent {
width: 300px;
margin: 0px; /* RESET CSS */
padding: 0px; /* RESET CSS */
float: left;
background: #CCC; /* VOOR DUIDELIJKHEID */
}
div.rightcontent {
width: 700px;
margin: 0px; /* RESET CSS */
padding: 0px; /* RESET CSS */
float: right;
background: #DDD; /* VOOR DUIDELIJKHEID */
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="leftcontent">
<h2>Lipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis condimentum imperdiet. Quisque mattis euismod aliquet. Curabitur pellentesque lacus sit amet ante luctus adipiscing. Aliquam ultricies consequat neque, eget rhoncus enim facilisis ut. Fusce lobortis vulputate purus vitae scelerisque. Nunc nulla est, mattis quis pharetra vitae, consectetur sagittis tellus. Donec in mi non enim venenatis egestas non et felis. Nunc consectetur nisi ut purus lacinia sit amet varius tellus consectetur. Integer tristique, tortor sit amet tincidunt gravida, tellus felis euismod sem, vitae mollis ligula est ut erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tellus ante, dapibus ac fermentum vitae, posuere non purus. Nulla dignissim pretium lectus, quis blandit turpis ornare quis. Proin vitae massa quis nulla mollis vestibulum. In nisl mauris, faucibus quis scelerisque eu, auctor pretium tellus. Pellentesque vitae quam quis eros scelerisque iaculis id sed turpis. Fusce non ante vel quam scelerisque iaculis.</p></div>
<div class="rightcontent">
<h1>Lipsum</h1>
<p>Integer a quam sit amet est scelerisque euismod et sit amet mi. Aliquam nulla nisi, tincidunt sodales fringilla in, facilisis eget mauris. Etiam sit amet mi nisl. Morbi aliquet ligula vel sem ultrices condimentum non nec nunc. Pellentesque non tortor augue, in sodales tellus. Donec eu consequat dolor. Integer dictum erat ut augue elementum pellentesque. Duis sem metus, laoreet ut euismod sit amet, mollis et diam. Duis vel ligula in dolor tincidunt posuere in quis massa. Etiam mollis mi a risus consequat eu accumsan odio pretium. Suspendisse hendrerit luctus turpis, quis facilisis nibh interdum in. Sed a arcu quis tortor semper ornare. Nulla vel lorem orci. Praesent placerat odio et purus blandit aliquet.</p>
<p>Etiam volutpat, risus id sagittis ultrices, enim eros blandit nulla, vitae placerat velit nisl non libero. Aenean ut risus sapien. Etiam condimentum velit quis nisi malesuada ultricies. Proin nec rutrum mauris. Pellentesque in eros non mauris placerat rutrum at sed nisl. Vivamus rutrum suscipit risus vel tincidunt. Vivamus tristique metus a nunc vehicula condimentum. Fusce purus lorem, mattis at sodales eu, gravida feugiat est. Quisque dignissim lacus vel magna aliquam ultrices. Sed ornare posuere tortor id semper. Suspendisse ullamcorper, metus quis dapibus placerat, nisl lorem auctor metus, vel fermentum velit ante nec nisl. Vivamus porta arcu eu eros feugiat a feugiat arcu blandit.</p>
<p>Quisque sed turpis eget odio scelerisque porttitor. Morbi id placerat libero. Quisque metus est, dictum a congue facilisis, faucibus in sem. Etiam felis ante, vulputate vel convallis et, hendrerit quis neque. Phasellus condimentum placerat nunc quis vehicula. Praesent rhoncus quam sed mi pretium non aliquam est euismod. Integer et interdum nulla. Ut et velit id turpis eleifend pellentesque condimentum ut velit. Mauris sollicitudin ultrices justo, ac euismod ante malesuada nec. Aliquam malesuada est vel eros mattis convallis. Quisque mattis sollicitudin blandit. Donec ornare posuere purus, eget luctus purus imperdiet sit amet. Ut ac mi orci, a mattis lorem. </p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Wouter De Schuyter