Hallo zusammen,
ich habe ein kleines "float" Problem und hoffe das man es beheben kann:
HTML-Code:
<!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>grid Test</title>
<style media="all" type="text/css">
.wrap {
width: 850px;
overflow: hidden;
position: relative;
}
.span6 {
float: left;
display: inline;
width: 494px;
background-color: #0CF;
border-bottom: 1px solid red;
}
.span4 {
float: left;
display: inline;
width: 324px;
background-color: #9F6;
border-bottom: 1px solid #690;
}
.wrap2 .span6 {
float: left;
display: inline;
width: 494px;
background-color: #0CF;
border-bottom: 1px solid red;
}
.wrap2 .span4 {
float: right;
display: inline;
width: 324px;
background-color: #9F6;
border-bottom: 1px solid #690;
}
.clean {
clear: both;
}
</style>
</head>
<body>
<h1>LIVE Markup</h1>
<div class="wrap">
<div class="span6"><br /><br /><br /><br /><br /><br /><br />span6 - komplette inhalte links<br /><br /><br /><br /><br /><br /><br /></div>
<div class="span4"><br /><br /><br /><br /><br />span4 - komplette inhalte rechts<br /><br /><br /><br /><br /></div>
</div>
<hr />
<h1>LIVE Markup</h1>
<h2>wie es bootstrap macht: float:left ; feste Breite</h2>
<div class="wrap">
<div class="span6"><br /><br /><br />span6<br /><br /><br /></div>
<div class="span6"><br /><br />span6<br /><br /></div>
<div class="span6"><br /><br /><br /><br /><br />span6<br /><br /><br /><br /><br /></div>
<div class="span4"><br /><br /><br />span4<br /><br /><br /></div>
<div class="span4"><br /><br />span4<br /><br /></div>
<div class="span4"><br /><br /><br /><br /><br />span4<br /><br /><br /><br /><br /></div>
</div>
<hr />
<h2>float:right ; feste Breite</h2>
<div class="wrap wrap2">
<div class="span6"><br /><br /><br /><br />span6<br /><br /><br /><br /></div>
<div class="span6"><br /><br />span6<br /><br /></div>
<div class="span6"><br /><br /><br /><br /><br />span6<br /><br /><br /><br /><br /></div>
<div class="span4"><br /><br /><br />span4<br /><br /><br /></div>
<div class="span4"><br /><br />span4<br /><br /></div>
<div class="span4"><br /><br /><br /><br /><br /><br />span4<br /><br /><br /><br /><br /><br /></div>
</div>
<hr />
<h1>neues Markup damit es passt</h1>
<div class="wrap">
<div class="span6"><br /><br /><br /><br />span6<br /><br /><br /><br /></div>
<div class="span4"><br /><br /><br />span4<br /><br /><br /></div>
<div class="span6"><br /><br />span6<br /><br /></div>
<div class="span4"><br /><br />span4<br /><br /></div>
<div class="span6"><br /><br /><br /><br /><br />span6<br /><br /><br /><br /><br /></div>
<div class="span4"><br /><br /><br /><br /><br /><br />span4<br /><br /><br /><br /><br /><br /></div>
</div>
</body>
</html>
Ich möchte bzw. kann ich nicht das Markup ändern, d.h. es müsste alles neben einander so wie im letzten Bsp. nur mit dem Markup von oben
Hat jemand noch eine Idee?!
DANKE!