Hallo Leute,
ich habe eiin Problem und weiß nicht wie man es lösen kann.
Ich habe ein HTML5 Dokument mit drei Spalten, die in einem Wrapper gepackt sind...also ziemlich easy. Allerdings möchte ich, dass der Text, der nach den drei Spalten kommt auch noch mit in den Wrapper gepackt wird.
Praktisch gesehen möchte ich ein 1 Spaltenlayout haben aber zwischendurch immer mal so dreier Boxen mit informationen und links im Text haben.
Nen groben Sketch könnt ihr im Anhang sehen.
ich habe eiin Problem und weiß nicht wie man es lösen kann.
Ich habe ein HTML5 Dokument mit drei Spalten, die in einem Wrapper gepackt sind...also ziemlich easy. Allerdings möchte ich, dass der Text, der nach den drei Spalten kommt auch noch mit in den Wrapper gepackt wird.
Praktisch gesehen möchte ich ein 1 Spaltenlayout haben aber zwischendurch immer mal so dreier Boxen mit informationen und links im Text haben.
Nen groben Sketch könnt ihr im Anhang sehen.
HTML:
<!DOCTYPE html>
<head>
<!-- HTML5 is accessable for IE8, IE7, IE6 -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
div.wrapper {
width: 1112px;
background: #CCC;
color: #333;
padding: 10px;
}
/*------3er*/
div.three-left {
float: left;
margin: 10px 10px 10px 0;
}
div.three-middle {
float: left;
margin: 10px 10px 10px 10px;
}
div.three-right {
float: right;
margin: 10px 0 10px 10px;
}
div.three-left,
div.three-middle,
div.three-right {
background: #ba9a90;
width: 335px; /*+2px border*/
padding: 10px;
border: 1px solid #d1ada1;
}
/*END 3er*/
/*CLEAR FIX*/
.clearfix:after {
content: ".";
clear: both;
display: inline;
height: 0;
visibility: hidden;
}
/*IE7 Patch für Clear Fix*/
*:first-child+html .clearfix { min-height: 0; }
/*IE6 Patch für Clear Fix*/
* html .clearfix {height: 1%; }
</style>
</head>
<body>
<div class="wrapper">
<h2>Breaks</h2>
<p>
o The breaks are very strong and very good
</p>
<h2>Sun Roof</h2>
<p>
o There is an electrically roof – everything is working fine
</p>
<h2>Electronics </h2>
<p>
o The car is amazing everything is electronically and everything works fine
</p>
<div class="three">
<div class="three-left">
<h2>Ich bin die Überschrift für das linke Feld</h2>
<p>Hallo, ich bin ein Text, der wahlweise hier eingefügt werden kann.</p>
<ul>
<li>IchBinEinListenpunkt</li>
<li>IchBinEinListenpunkt</li>
</ul>
</div><!--end three-left-->
<div class="three-middle">
<h2>Ich bin die Überschrift für das rechte Feld</h2>
<p>Hallo, ich bin ein Text, der wahlweise hier eingefügt werden kann.</p>
<ul>
<li>IchBinEinListenpunkt</li>
<li>IchBinEinListenpunkt</li>
</ul>
</div><!--end three-middle-->
</div><!--end three-->
<div class="three-right">
<h2>Ich bin die Überschrift für das rechte Feld</h2>
<p>Hallo, ich bin ein Text, der wahlweise hier eingefügt werden kann.</p>
<ul>
<li>IchBinEinListenpunkt</li>
<li>IchBinEinListenpunkt</li>
</ul>
</div><!--end three-right-->
<div class="clearfix"></div>
</div><!--end three-->
<h2>Breaks</h2>
<p>
o The breaks are very strong and very good
</p>
</div><!--end Wrapper-->
</body>
