✔ Zwei Blocks mit gleicher Höhe und mit float nebeneinander positionieren

[julchen]

Hallo,
ich möchte in zwei Bereiche, einen Textbereich und einen Bereich mit einem Bild nebeneinander positioniern. Dabei wollte ich die Bereiche mit float positionieren. Dabei sollten die beiden Bereiche von der Höhe her gleich sein, auch wenn der Textbereich mit viel Text höher wird, als der Bereich mit dem Bild.
Die beiden Bereich sollen eine Hintergrundfarbe bekommen. Zwischen den Bereichen soll ein Abstand von ungefähr 2 pixeln sein. Das Bild im rechten Bereich hat immer die gleiche größe und ist kleiner als der Bereich selber.
Kann ich das mit float erreichen und wie kann ich das ganze erreichen.

Gruss
Julinus

 

[Radhad]

Du müsstest um die beiden Bereiche einen div-Container tun und in diesem div die Hintergrudngrafik, welche für deinen text & Bildbereich jeweils die Hintergrundgrafik hat (mit repeat-y). Dann können die Bereiche unterschiedlich hoch sein, sehen aber gleich hoch aus.


Gruß Radhad

 

[julchen]

Hallo,
vielen Dank, das hab ich soweit hinbekommen. Allerdings positioniert er mir die beiden Blöcke nicht nebeneinander.

Wo liegt der Fehler?

Hier ein Auszug:

<div id="content_block">
				<p class="content_block_left">
					<h2 class="content_block_title">Leistungsspektrum</h2>
						<ul id="content_block_liste">
						<li><strong>Einfamilienhaus</strong> in Holzrahmenbauweise</li>
						<li><strong>Anbauten</strong></li>
						<li><strong>Aufstockungen</strong></li>
						<li><strong>Br&uuml;ckenbau</strong></li>
						<li><strong>Carports</strong></li>
						<li><strong>Gewerbebau</strong></li>
						<li>hochkomplexe <strong>Dachbauten</strong>.</li>
						</ul>
				</p>		
				<p class="content_block_right">
					test
				</p>
			</div>

CSS Auszug:

#content_block{
	width:578px;
	background-image:url(../images/bg_content_block.gif);
	background-repeat:repeat-y;
}
.content_block_right{
	width:200px;
	color:#000;
}
.content_block_left{
	width:350px;
	color:#000;
	margin-left:10px;
	float:left;
}
.content_block_title{
	color:#fff;
	padding-left:10px;
	font-size:12px;
	font-weight:bold;
}
h2.content_block_title{
	color:#fff;
	padding-left:10px;
	font-size:12px;
	font-weight:bold;
}
#content_block_liste{
	padding-left:10px;
	margin-left:20px;
	list-style-position:outside;
	list-style-image:url(../images/arrow_liste.gif);
}
#content_block_liste li{
	line-height:10px;
	margin-top:5px;
	padding-bottom:5px;
}

Gruss
Julchen

 

[Maik]

Lösungsvorschlag:

#content_block{
        width:578px;
        background-image:url(../images/bg_content_block.gif);
        background-repeat:repeat-y;
}
.content_block_right{
        width:200px;
        color:#000;
        float:right;
}
.content_block_left{
        width:350px;
        color:#000;
        margin-left:10px;
        float:left;
}
.content_block_title{
        color:#fff;
        padding-left:10px;
        font-size:12px;
        font-weight:bold;
}
h2.content_block_title{
        color:#fff;
        padding-left:10px;
        font-size:12px;
        font-weight:bold;
}
#content_block_liste{
        padding-left:10px;
        margin-left:20px;
        list-style-position:outside;
        list-style-image:url(../images/arrow_liste.gif);
}
#content_block_liste li{
        line-height:10px;
        margin-top:5px;
        padding-bottom:5px;
}
div.clear {
        clear: both;
        font-size: 1px;
}

Und die p-Elemente durch div-Elemente ersetzen:

<div id="content_block">
     <div class="content_block_left">
        <h2 class="content_block_title">Leistungsspektrum</h2>
        <ul id="content_block_liste">
            <li><strong>Einfamilienhaus</strong> in Holzrahmenbauweise</li>
            <li><strong>Anbauten</strong></li>
            <li><strong>Aufstockungen</strong></li>
            <li><strong>Br&uuml;ckenbau</strong></li>
            <li><strong>Carports</strong></li>
            <li><strong>Gewerbebau</strong></li>
            <li>hochkomplexe <strong>Dachbauten</strong>.</li>
        </ul>
     </div>
     <div class="content_block_right">
        test
     </div>
     <div class="clear">&nbsp;</div>
</div>