• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem mit float und clear

H

hidingmyfame

New member
Hallo an alle,

ich bin gerade dabei eine Website zu erstellen und da tritt nun folgendes Problem auf:

Ich hab in einem <div> Tag 3 weitere nebeneinander platziert was nun im FF so aussieht (FALSCH):

falsch.jpg


aussehen sollte es so:

richtig.jpg


Hier der entsprechende (X)HTML 1.0 Strict Quelltext:

Code: 
        <div id="content_area">
        	<div id="content_left">
            	<div id="content_box_1">
                	<div id="content_box_1_image"></div>
					<div id="content_box_1_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                    
                   </div>                                    
                </div>
                <div id="content_box_2">
                	<div id="content_box_2_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.                    
                    </div>
                    <div id="content_box_2_menu">
                    	<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%; background-color: #8dc73d;">
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle2"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        </table>
                    </div>                
                </div>
                <div class="clear"></div>
            </div>
            <div id="content_right">
            	<div id="content_right_text">
            		<span class="heading">Lorem ipsum</span><br />
                    <br />
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                
                </div>
                <div class="clear"></div>
            </div>   
        </div>            
        <div id="grey_stripe"></div>
        <div id="footer">
        	<div id="anschrift1">
                <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
               Lorem ipsum<br />
                <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
			<div id="anschrift2">
            	<span class="bold">Lorem ipsum</span><br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
        	           Lorem ipsum<br />
    	        <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
            <div id="anschrift3">
	            <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                <a href="Lorem ipsum">Lorem ipsum</a><br />
            </div>
        </div>

und hier das CSS dazu:

Code: 
#content_area {
height : 360px;
width : 100%;
background-color : #ffffff;
}

#content_left {
width : 460px;
height : 360px;
padding : 20px;
float : left;
}

#content_box_1 {
height : 160px;
width : 100%;
}

#content_box_1_image {
background-image : url("../images/content_box_1_image.png");
background-repeat : no-repeat;
width : 138px;
height : 140px;
margin-right : 20px;
float : left;
}

#content_box_1_text {
float : right;
width : 300px;
}

#content_box_2 {
height : 160px;
width : 100%;
background-color : #e0f7b3;
}

#content_box_2_text {
width : 330px;
float : left;
margin-top : 5px;
margin-left : 5px;
}

#content_box_2_menu {
width : 120px;
height : 160px;
color : #ffffff;
float : right;
}

.zelle {
height : 22px;
border-bottom : 1px solid #ffffff;
padding-left : 5px;
}

.zelle2 {
height : 22px;
padding-left : 5px;
}

.zelle a {
color : #ffffff;
text-decoration : none;
}

.zelle a:hover {
text-decoration : underline;
}

.zelle2 a {
color : #ffffff;
text-decoration : none;
}

.zelle2 a:hover {
text-decoration : underline;
}

#content_right {
width : 200px;
height : 360px;
background-color : #f6f7e9;
float : right;
}

#content_right_text {
margin-top : 90px;
margin-left : 20px;
margin-right : 20px;
}

#grey_stripe {
height : 2px;
width : 100%;
margin-bottom : 1px;
background-color : #333333;
}

#footer {
height : 100px;
width : 100%;
background-color : #333333;
}

#anschrift1 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;

margin-top : 10px;
margin-left : 20px;
margin-right : 40px;

float : left;
border : 1px solid #fff;
}

#anschrift2 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
margin-right : 40px;
float : left;
border : 1px solid #fff;
}

#anschrift3 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
float : left;
border : 1px solid #fff;
}

Danke schon im Vorraus für die Hilfe!
 
Nachtrag:

Mit absoluter Positionierung bekomme ich das Problem in den Griff,
allerdings ist das ja gerade auch in Hinsicht auf Barrierefreiheit nicht das wahre...
 
Hallo dkdenz,

oh Entschuldigung. Dann poste ich jetzt nochmal den kompletten Quelltext, evtl. ist es dann sowieso besser nachvollziehbar.
Ich habe die betreffenden Codezeilen in Fett hervorgehoben.

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<meta name="robots" content="index, follow" />
    <meta name="keywords" content="xyz" />
  	<meta name="description" content="xyz" />
    
    <title>:: xyz ::</title>
    
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    
    <script type="text/javascript">
    <!--			
    window.defaultStatus = ":: xyz ::";
    -->
    </script>
</head>

<body>
	<div id="border">
    	<div id="top">
        	<div id="logo"></div>
            <div id="navigation">
                <table border="0" cellspacing="0" cellpadding="0" class="mainmenu">
                  <tr>
                    <td style="width: 101px;"><a href="#">Unternehmen</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Leistungen</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Ihr Team</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Service</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Kontakt</a></td>
                  </tr>
                </table>
            </div>
      </div>
        <div id="green_stripe_bright"></div>
        <div id="head_gradient">
        	<div id="head_form_left"></div>
            <div id="head_form_right"></div>
            <div id="head_bild"></div>
            <div class="clear"></div>
        </div>
        <div id="green_stripe_dark"></div>
            [B]<div id="content_area">
        	<div id="content_left">
            	<div id="content_box_1">
                	<div id="content_box_1_image"></div>
					<div id="content_box_1_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                    
                   </div>                                    
                </div>
                <div id="content_box_2">
                	<div id="content_box_2_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.                    
                    </div>
                    <div id="content_box_2_menu">
                    	<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%; background-color: #8dc73d;">
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle2"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        </table>
                    </div>                
                </div>
                <div class="clear"></div>
            </div>
            <div id="content_right">
            	<div id="content_right_text">
            		<span class="heading">Lorem ipsum</span><br />
                    <br />
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                
                </div>
                <div class="clear"></div>
            </div>   
        </div>            
        <div id="grey_stripe"></div>
        <div id="footer">
        	<div id="anschrift1">
                <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
               Lorem ipsum<br />
                <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
			<div id="anschrift2">
            	<span class="bold">Lorem ipsum</span><br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
        	           Lorem ipsum<br />
    	        <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
            <div id="anschrift3">
	            <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                <a href="Lorem ipsum">Lorem ipsum</a><br />
            </div>
        </div>[/B] 
    </div>
</body>
</html>

CSS:
Code: 
@charset "utf-8";

body, html {
font-family : Calibri, Arial, Tahoma, Verdana;
background-image : url(../images/wood.jpg);
font-size: 100.01%;
}

#border {
height : 100%;
width : 700px;
border : 1px solid #000000;
background-color : #ffffff;
margin-left : auto;
margin-right : auto;
position : relative;
}

#top {
width : 100%;
height : 60px;
background-color : #ffffff;
}

#logo {
height : 43px;
width : 190px;
margin-left : 10px;
margin-top : 10px;
background-image : url("../images/logo.png");
background-repeat : no-repeat;
float : left;
}

#navigation {
font-family : Arial, Tahoma, Verdana;
color : #8ab54a;
font-weight : bold;
font-size: 0.75em;
height : 100%;
width : 50%;
float : right;
}

.mainmenu {
display : block;
text-align : center;
height : 29px;
position : absolute;
right : 0;
top : 31px;
line-height : 250%;
}

.mainmenu a:link {
display : block;
height : 29px;
margin-top : auto;
margin-bottom : auto;
color : #8dc73f;
background-color : #ffffff;
text-decoration : none;
}

.mainmenu a:hover {
display : block;
height : 29px;
color : #ffffff;
background-color : #8dc73f;
text-decoration : none;
}

.trennstrich {
background-image : url("../images/trennstrich.png");
background-repeat : repeat-y;
}

#green_stripe_bright {
height : 2px;
width : 100%;
margin-bottom : 1px;
background-color : #8dc73f;
}

#head_gradient {
background-image : url("../images/head_gradient.png");
background-repeat : repeat-x;
height : 200px;
}

#head_form_left {
margin-top : 18px;
background-image : url("../images/head_form_left.png");
background-repeat : no-repeat;
height : 182px;
width : 170px;
float : left;
}

#head_form_right {
background-image : url("../images/head_form_right.png");
background-repeat : no-repeat;
height : 199px;
width : 371px;
float : right;
margin-right : 10px;
}

#head_bild {
z-index : 2;
background-image : url("../images/head.png");
background-repeat : no-repeat;
height : 268px;
width : 295px;
position : absolute;
right : 20px;
top : 80px;
}

.clear {
clear : both;
}

#green_stripe_dark {
height : 2px;
width : 100%;
margin-top : 1px;
background-color : #017342;
}

[B]#content_area {
height : 360px;
width : 100%;
background-color : #ffffff;
}

#content_left {
width : 460px;
height : 360px;
padding : 20px;
float : left;
}

#content_box_1 {
height : 160px;
width : 100%;
}

#content_box_1_image {
background-image : url("../images/content_box_1_image.png");
background-repeat : no-repeat;
width : 138px;
height : 140px;
margin-right : 20px;
float : left;
}

#content_box_1_text {
float : right;
width : 300px;
}

#content_box_2 {
height : 160px;
width : 100%;
background-color : #e0f7b3;
}

#content_box_2_text {
width : 330px;
float : left;
margin-top : 5px;
margin-left : 5px;
}

#content_box_2_menu {
width : 120px;
height : 160px;
color : #ffffff;
float : right;
}

.zelle {
height : 22px;
border-bottom : 1px solid #ffffff;
padding-left : 5px;
}

.zelle2 {
height : 22px;
padding-left : 5px;
}

.zelle a {
color : #ffffff;
text-decoration : none;
}

.zelle a:hover {
text-decoration : underline;
}

.zelle2 a {
color : #ffffff;
text-decoration : none;
}

.zelle2 a:hover {
text-decoration : underline;
}

#content_right {
width : 200px;
height : 360px;
background-color : #f6f7e9;
float : right;
}

#content_right_text {
margin-top : 90px;
margin-left : 20px;
margin-right : 20px;
}

#grey_stripe {
height : 2px;
width : 100%;
margin-bottom : 1px;
background-color : #333333;
}

#footer {
height : 100px;
width : 100%;
background-color : #333333;
}

#anschrift1 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;

margin-top : 10px;
margin-left : 20px;
margin-right : 40px;

float : left;
border : 1px solid #fff;
}

#anschrift2 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
margin-right : 40px;
float : left;
border : 1px solid #fff;
}

#anschrift3 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
float : left;
border : 1px solid #fff;
}
[/B]
/* Textformatierungen */

h1 {
font-family : Cambria, Arial, Tahoma, Verdana;
font-size: 1.0em;
font-weight : bold;
color : #8ab54a;
padding: 0;
margin: 0;
}

p {
	font-size: 0.75em;
}

.bold {
font-weight : bold;
}

Danke!
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben