Float Problem

I30R6 · 14 April 2016

HTML:

<!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>Unbenanntes Dokument</title>
</head>

<body>
  <p>&nbsp;</p>
   
   
    <div style="
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 400px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    background-color: #03F
    ">
   
    <div style="
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 400px;
    margin-left: 0;
    margin-right: 0;
    width: 400px;
    background-color: #F03;
    float: left;
    "><p>texttexttext</p></div>
   
   
   
    <div style="
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 400px;
    margin-left: 0;
    margin-right: 0;
    width: 500px;
    background-color: #0F6;
    "></div>
   
   
   
   
    </div>
   
    <p>&nbsp;</p>
</body>
</html>

Stehe hierbei irgendwie auf dem Schlauch. Bei mir wird die zweite div box trotz des float Befehls nicht neben der ersten div box dargestellt sondern darunter liegend. Wo liegt mein Fehler? Auch mit clear befehlen hatte ich bislang kein erfolg.

MfG
I30R6

MrMurphy · 14 April 2016

Hallo

Das ist das ganz normale Verhalten. Mit der float-Eigenschaft nimmst du das betreffende Element aus dem Dokumentenfluß und andere Elemente können seinen Platz einnehmen.

Um die beiden inneren div nebeneinander zu stellen kannst du zum Beispiel dem anderen auch ein float-left verpassen. Oder ein passenden linken Abstand. Was am sinnvollsten ist hängt von deiner gesamten Seite ab.

Float ist recht kompliziert, siehe zum Beispiel

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Insgesamt gibt es aber heutzutage auch andere Lösungen wie zum Beispiel Flexbox.

Du solltest auch auf Inline-CSS und Konstrukte wie

Code:

<p>&nbsp;</p>

verzichten.

XHTML wurde bereits 2008 offiziell zu Grabe getragen und sollte seitdem nicht mehr verwendet werden. Die Browser zeigen solche Seiten zwar noch an, aber dass muss nicht für alle Zukunft so sein.

Gruss

MrMurphy

I30R6 · 14 April 2016

Schöne Beispiele auf der verlinkten Seite werde ich mir ansehen, danke :)

Auch nach Flexbox werde ich mal googeln.

Inline CSS habe ich vorwiegend nur beim Beispiel genutzt, um es übersichtlicher zu gestalten. Werde ich künftig versuchen drauf zu verzichten.

Was ist die elegantere Alternative zu

Code:

<p>&nbsp;</p>

???

Auf das XHTML 1.0 habe ich gar nicht geachtet, das gibt mir Dreamweaver automatisch beim Anlegen eines neuen Dokument.

Was wäre Zeitgemäßer?

Gruß
I30R6

MrMurphy · 14 April 2016

Hallo

Was wäre Zeitgemäßer?

HTML5 mit

Code:

<!DOCTYPE html>

Was ist die elegantere Alternative zu

Obere und untere Abstände mit margin, zum Beispiel

Code:

margin: 2rem 0;

Inline CSS habe ich vorwiegend nur beim Beispiel genutzt, um es übersichtlicher zu gestalten. Werde ich künftig versuchen drauf zu verzichten.

Für Testseiten verwende ich gerne Inline-CSS. Das wird in den head-Bereich einer Seite geschrieben. Der aktuelle Quellcode einer Seite mit Inline-CSS könnte zum Beispiel folgendermaßen aussehen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Float-Problem 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /* Clearfix - Micro-Clearfix-Hack */
   @media all {
      .cf::before,
      .cf::after {
         content: " "; /*Leerstelle ist wichtig*/
         display: table;
      }
      .cf::after {
         clear: both;
      }
   }

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
      }
      .floatcontainer,
      .floatcontainer>div {
         height: 400px;
      }
      .floatcontainer {
         background-color: #03F;
         min-width: 800px;
         margin: 2rem 0;
      }
      .floatcontainer>div {
         float: left;
         width: 400px;
      }
      .floatcontainer>div:nth-child(1) {
         background-color: #F03;
      }
      .floatcontainer>div:nth-child(2) {
         background-color: #0F6;
      }
   }

   </style>
</head>
<body>
   <div class="floatcontainer cf">
      <div>
         <p>texttexttext</p>
      </div>
      <div>
      </div>
   </div>
</body>
</html>

Gruss

MrMurphy

I30R6 · 16 April 2016

Jo, danke für die Korrekturmühe und den weiteren Input, ich werde versuchen an meinem Stil zu arbeiten. ;)

Float Problem

I30R6

Neues Mitglied

MrMurphy

Senior HTML'ler

I30R6

Neues Mitglied

MrMurphy

Senior HTML'ler

I30R6

Neues Mitglied

Neueste Beiträge