HTML/CSS Probleme mit floats?

Schönen guten Abend!

Ich habe ein Problem, wie bereits im Fragetitel erwähnt, mit Floats. Mein Vorhaben war es, einen Kasten zu erstellen, in dem links ein Bild mit einer Breite von 50% liegt sowie rechts ein weiterer Kasten mit Textinhalt. Dazu habe ich das Bild mit 50% Breite nach links gefloatet und den Textkasten dementsprechend nach rechts (siehe Quellcode unten). Als ich dem übergeordneten Kasten (main-container) schließlich einen Rahmen gegeben habe, erwartete ich, dass dieser beide Elemente (Bild und Textfeld) vollständig umschließt. Stattdessen kam Folgendes dabei heraus:

Wie kommt es zu diesem Umstand? Solche Probleme treten bei mir häufig nur unter der Verwendung von Floats auf. Ich kann sie nur nicht so recht nachvollziehen. Alles in allem ist es mir wichtig, mit relativen Größenangaben zu arbeiten, damit sich die Inhalte bei Verkleinerung/Vergrößerung des Browserfensters auch gemäß prozentual anpassen.

Wer kann mir da ein wenig weiterhelfen und / oder mir sagen, warum dieses Problem auftritt?

Über mögliche Alternativen würde ich mich auch freuen! Danke im Voraus!

Quellcode mit Internal CSS:

<!DOCTYPE html>
<html lang="de-de">
  <head>
    <meta charset="utf-8">
    <title>Hilfe!</title>
  
    <!-- INTERNAL-CSS -->
    <style>
      .main-container {
        width: 75%;
        margin: 0 auto;
        border: 3px solid #000;
      }
  
      img {
        width: 50%;
        height: auto;
        float: left;
      }
  
      .text-container {
        width: 50%;
        float: right;
        font-size: 1.5rem;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="main-container">
      <img src="kueche.jpg" alt="Küche">
      <div class="text-container">
        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 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.
      </div>
    </div>
  </body>
</html>
HTML, CSS, Problemlösung, float
5 Antworten
Problem in HTML mit nicht definierten Anker?

Schönen guten Abend euch allerseits!

Ich teste mich aktuell an einer kleinen Website, da ich sehr gerne Projekte mit HTML/CSS/JS in meiner Freizeit mache - Aber egal, nun zur eigentlichen Frage:

Im unterem pinken Testbalken (class="test") erscheint beim Hinüberfahren die Veränderung des Mauszeigers und es wird klar, dass im div ein Anker gesetzt ist - Er führt beim Draufklicken auf die Startseite, wie sie zu sehen ist (basskatze.html). Woran könnte das liegen - Ich habe im div selber keinen Anker definiert.

Hier der Quellcode:

HTML

<!DOCTYPE html>
<html lang="de-de">
<head>
  <meta charset="utf-8">
  <!-- RESPONSIVE -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- MAIN-CSS -->
  <link rel="stylesheet" type="text/css" href="basskatze.css">
  <!-- MEDIA-CSS -->
  <link rel="stylesheet" type="text/css" href="media.css">
  <!-- FONTAWESOME-ICONS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <!-- GOOGLE-FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <!-- TITLE -->
  <title>Basskatze - Home</title>
</head>
<body>


  <!-- HEADER -->
  <header>


    <h1><a href="basskatze.html">Basskatze Online</a></h1>


  </header>


  <!-- NAVIGATION -->
  <nav>


    <div class="nav-1">


      <h2>Folge uns auf...</h2>


      <a href=""><i class="fab fa-youtube"></i>Youtube</a>
      <a href=""><i class="fab fa-facebook-square"></i>Facebook</a>
      <a href=""><i class="fab fa-instagram"></i>Instagram</a>


    </div>


    <div class="nav-2">


      <h2>Soundtracks</h2>


      <a href=""><i class="fas fa-music"></i>Mixtapes</a>
      <a href=""><i class="fas fa-compact-disc"></i>Alben</a>
      <a href=""><i class="fas fa-list"></i>Playlist</a>


    </div>


    <div class="nav-3">


      <h2>Videos&Kontakt</h2>


      <a href=""><i class="fas fa-video"></i>Videos</a>
      <a href=""><i class="fas fa-comments"></i>Chat</a>
      <a href=""><i class="fas fa-envelope-square"></i>Kontakt</


    </div>


  </nav>


  <!-- MENU-HEADER -->


  <div class="test">






  </div>


</body>
</html>


Computer, Technik, HTML, CSS, Technologie
2 Antworten
Wer kann mir bei diesem Problem in HTML weiterhelfen?

Schönen guten Tag!

Letztens habe ich mir mal ein paar Icons für eine Website geschnappt und damit ein wenig rumgespielt :D

Dabei handelt es sich schlicht um beispielsweise ein Facebook Icon, indem ein Link versteckt ist. Um es etwas "interaktiv" wirken zu lassen, habe ich im CSS vorgegeben, dass beim Drüberhovern die Icons etwas größer werden.

Klappt soweit auch, außer dass sich die untere und seitliche Grenze der Box, indem sich die Icons befinden, ein wenig nach unten hin bewegt - Erscheint mir auch alles logisch, nur möchte ich genau dieses Verhalten nicht: Die Maße der Box sollen nach Vergrößerung der Icons durch "Drüberhovern" gleich bleiben.

Hier nochmal genauer:

Ohne Hover

Mit Hover

Ich denke, ihr ich meine :)

Hier noch der Quellcode:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">

  <title>Test</title>

  <link rel="stylesheethttps://use.fontawesome.com/releases/v5.7.1/css/all.css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  <!-- CSS -->

  <style>

    .background {
      display: inline-block;
      background-color: lightgray;
      box-sizing: border-box;
      border: 2px solid #000;
      text-align: center;
      padding: 2rem;
    }

    .background > .icons > a > i{
      font-size: 30px;

      color: #000;
    }

    .background > .icons > a > i:hover {
      font-size: 35px;
    }
  </style>

</head>
<body>

<div class="background">
  <!-- ICONS -->
  <div class="icons">

    <a href=""><i class="fab fa-facebook-square"></i></a>
    <a href=""><i class="fas fa-book"></i></a>
    <a href=""><i class="fab fa-google-plus-square"></i></a>

  </div>
</div>

</body>
</html>
Computer, Technik, HTML, CSS, Technologie
2 Antworten