Ik wil in een content-blok, twee blokken naast elkaar zetten. Het is best dat je even in de bijgevoegde screenshot kijkt om te zien wat ik bedoel. De twee blokken binnen het grote blok wil ik naast elkaar krijgen.
Hier is de css die ik momenteel gebruik:
Code: Selecteer alles
body{margin: 0px; color: #333; font-family: verdana, arial, helvetica, sans-serif; background-color: #fff; font-size: 11px;}
img {border: 0px solid #000000;}
br {clear: left;}
a{font-weight: bold; font-size: 11px; color: #09c; text-decoration: none;}
a:link{color: #09c;}
a:visited{color: #07a;}
a:hover{color: #000;}
.menuleft{left: 10px; position: absolute; top: 37px;}
.menuright{right: 10px; position: absolute; top: 37px;}
.menu{padding: 10px; width: 100px; position: relative; margin-bottom: 10px; border: 1px solid #999; background: #eee;}
.contents{margin: 10px 10px 10px 140px;}
.content{border: 1px solid #999; background: #eee; padding: 10px; text-align: justify; margin-bottom: 10px; position: relative;}
.content_left{padding-top: 10px; margin-bottom: 10px; width: 40%; padding-left: 60%; position: relative;}
.content_right{padding-top: 10px; margin-bottom: 10px; padding-right: 60%; position: relative;}
.content_title{font-weight: bold;}
.header, .footer{border-top: 1px solid #999; border-bottom: 1px solid #999; background-color: #eee; text-indent: 10px; margin-top: 10px; height: 15px; width: 100%;}
op devolgende pagina:
Code: Selecteer alles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
Application title
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
Application title
</div>
<div class="contents">
<div class="content">
<span class="content_title">Title</span>
<div class="content_right">Lorem ipsum ... dolor sit amet.</div>
<div class="content_left">Duis autem ... aliquam erat volutpat.</div>
</div>
<div class="content">
<span class="content_title">Title</span>
</div>
<div class="content">
<span class="content_title">Title</span>
<p>Ut wisi ... nulla facilisi.</p>
<p>Nam liber ... commodo consequat.</p>
<p>Duis autem ... nulla facilisis.</p>
</div><!-- SECTION START menu_left -->
<div class="menuleft"><div class="menu">
<a href="index.php">Index</a>
<br />
</div><div class="menu">
<a href="#">Lorem</a><br />
<a href="#">Ipsum</a><br />
<a href="#">Dolor</a><br />
</div></div>
<!-- SECTION END menu_left --> </div>
<div class="footer">
</div>
</body>
</html>
Iemand een idee voor die twee 'sub'-blokken netjes naast elkaar te krijgen?