HTML/CSS Wordpress float:left Problem

[Geegle]

Hallo,

ich habe ein Problem im Contentbereich eines Wordpress Themes, welches ich selbst nicht behoben kriege:
Über viele verschiedene DIVs floated der gesamte Inhalt des Contentbereichs immer nach links. Zu sehen ist das Problem im untenstehenden Bild. Das Bild des Läufers sollte eigentlich zwischen den Texten sein, wird aber nach links gezogen und der Text dementsprechend herum gelegt. Auf Formatierung aus dem Backend heraus wird gar nicht reagiert. Ich nehme an, dass das CSS die Formatierung stört.

<?php get_header(); ?>
<div id="content">
<div class="box01">
<div class="left">

<div class="cols02">
<div class="entry">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2 class="pageH2"><?php the_title(); ?></h2>
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p class="pageNav2"><strong>Seiten:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php endwhile; endif; ?>
</div>
</div>

<?php get_sidebar(); ?>
<?php include("sidebar2.php"); ?>
<?php get_footer(); ?>

body {position: relative; background: #1f1f1f; font: 70% Verdana, Arial, Helvetica, sans-serif; text-align: center; letter-spacing: 0;}
#container {float: left; display: block; width: 100%;}
#topbar {float: left; display: block; width: 100%; background-image: url(images/topbar.png); background-position: top; background-repeat: repeat-x; text-align: left; padding: 13px 0 6px 0;}
#topbar div {padding-bottom: 0;}
#header {float: left; display: block; width: 100%; background-image: url(images/header.png); background-position: top; background-repeat: repeat-x; text-align: left;}
#content {float: left; display: block; width: 100%; text-align: left;}
#related {float: left; display: block; width: 100%; background-image: url(images/related.png); background-position: top; background-repeat: repeat-x; text-align: left;}
#footer {float: left; display: block; width: 100%; background-image: url(images/footer.png); background-position: top; background-repeat: repeat-x; text-align: left; padding: 13px 0 6px 0;}

.cols01 {float: left; display: block; width: 280px; padding: 0 10px 48px 10px;}
.cols02 {float: left; display: block; width: 580px; padding: 0 10px 48px 10px;}
.cols03 {float: left; display: block; width: 880px; padding: 0 10px;}
.center {text-align: center;}

.box01 {display: block; max-width: 900px; margin: 0 auto; clear: both;}
.left {float: left; clear: both;}
.right {float: right;}

#mainpic {clear: both; padding: 9px; margin: 0 10px; background: url(images/1x1_20pc.png) top left;}
#mainpicinner {display: block; width: auto;}

.entry {float: left; width: 100%; clear: both; margin: 24px 0 0 0;}
.aComment {float: left; width: 100%; clear: both; margin: 0 0 12px 0;}
.aComment:last-child {background: none;}
.aComment h4 {margin: 0;}
.aComment h4 img {display: none;}
.aComment .textbkg {margin: 0 0 6px 0;}

"cols02" und "entry" sind mMn die beiden wichtigen DIVs, allerdings habe ich es nicht geschafft die Bereiche zu "entfloaten". Entfernen der beiden float:left Befehle waren wirkungslos. Wie kann ich dem entgegen wirken und das Problem beheben? Vielen Dank für einen Denkansatz!

Gruß

 

[topfklao]

Kannst du auf die Formatierung des Bildes Einfluss nehmen?

Wenn ja dann müsste schon ein

<img src="bild.jpg" style="[B]clear:both;[/B]">

Abhilfe schaffen. Mit "clear:both" entfloatest du das Bild.

 

[Geegle]

Danke dir!
Ich habe jetzt für die Bilder eine eigene CSS-Klasse angelegt und sie mit clear:both entfloatet. Hat tatsächlich das Problem erstmal gelöst. Ist aber sicher nicht die eleganteste Lösung, also mal schauen, wann mich das wieder einholt. Das Theme ist einfach schlecht aufgebaut und viel zu verschachtelt, aber zum entfitzeln habe ich keine Lust.