HTML/CSS Probleme mit floats?

 - (HTML, CSS, Problemlösung)

5 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
.main-container {
        width: 75%;
        margin: 0 auto;
        border: 3px solid #000;
        overflow: auto;
      }

Das Problem ist hier auch schon aufgetreten :)

komischerweise scheint das overflow explizit gesetzt das Problem in allem Browsern zu beheben, probiere es mal

Perfekt! Alles reibungslos und ohne jegliches Problem abgelaufen! Herzlichen Dank Ihnen!

LG und einen schönen Sonntag!

0

Du brauchst nur das Bild zu floaten. Das float: right für das Div sorgt dafür, dass es nichts mehr gibt, was gefloatet werden soll. Einfach nur das Bild floaten. Allerdings hast Du auch das Problem, dass bei jeder Bildschirmgrösse gefloatet wird. Du benötigst also eine eine Weiche:

@media only screen and (max-width: 600px) {

 img {

 float: none;

width: 100%

  }

}

Try it Yourself »

Woher ich das weiß: Berufserfahrung

Wow, vielen Dank - Es funktioniert fast hervorragend! Allerdings erst als ich das Media Query entnahm, aber es klappt! Allerdings hält meine untere Border einen kleinen Abstand zu meinen Inhalten, woran könnte das liegen?

Liebe Grüße und noch einen entspannten Sonntag :)

0

mit float hebst du das ganze aus der ebene aber noch im textfluss des browsers , damit hat der übergeordnete kasten keine höhe , somit der border bei der höhe 0

man könnte es als display:inline-block ; oder mit flexboxen machen .

Okay, ich danke Ihnen erstmal für Ihre Auskunft! Ich werde mal schauen, das Problem durch Ihre Hinweise zu beheben. Bild und Text müssen dann geflext werden, richtig?

LG

0
@korbi27

oder es muss eine feste höhe geben beim partent container . muss man echt ausprobieren ob das mit inline-box etc sich besser verhaält . den das problematische ist , Sie haben float noch nciht verstanden :) float optisch ungleich float browser verhalten . float ist immer eine ganz andere ebene , die aber dort standfindet wo das element gerade genutzt wird , nur hat es eben nix mit dem element wo es sich drinne befindet zu tun bzw keine auswirkung auf diese , weil es eine ebene drüber ist .

0

CSS Background verschwunden?

Ich habe einen Container mit nem footer im 3-Spaltenlayout (soll zumindest einer werden) mit folgendem HTML:

<div class="wrapper">
    <div id="left">
        **Content**
    </div>
    <div id="center">
        **Content**
    </div>
    <div id="right">
        **Content**
    </div>
</div>

Dazu dann folgendes CSS:

.wrapper {
    position: relative;
    background-color: #666;
}

.wrapper #left {
    position: absolute;
    left: 0;
    width: 30%;
}

.wrapper #center {
    position: absolute;
    left: 30%;
    width: 30%;
}

.wrapper #right {
    position: absolute;
    left: 60%;
    width: 30%;
}

Ich komm mir absolut dumm vor, dass ich bei so etwas simplen keinen Plan mehr habe, aber so, wie das Element jetzt positioniert ist, soll es sein. Das Problem ist nur: Der ganze Bereich hat jetzt, sobald man ein relativ positioniertes Element als Container um ein absolut positioniertes setzt, einfach keinen Hintergrund mehr. Also meine Frage: Wie kann das Element so, am untersten Ende der Seite/des Contents (nicht am Viewport!) positioniert sein, ohne dass mein guter Hintergrund flöten geht??

Danke schonmal

...zur Frage

Boostrap: Bild über ganze Breite des Browserfensters strecken?

Es ist vielleicht eine dumme Frage, aber ich kriege es nicht hin (kenne mich nicht aus mit Bootstrap):
Man soll ja laut Bootstrap-Anleitung seine Elemente in ein div stecken, das entweder die Klasse "container" oder "container-flui" hat. Ich wollte die Klasse "container" benutzen, weil ich nicht will, dass meine Texte über die ganze Breite gehen, habe aber gleichzeitig ein paar Bilder, die über die gesamte Breite des Browserfenster gehen sollen, was mit "container" aber nicht zu funktionieren scheint. Mit container-fluid schon, aber dann gehen auch die Texte über die ganze Breite. Und den Texten einfach eine max-width und margin: 0 auto zu geben scheint auch nicht zu funktionieren. Noch eine Info: ich habe den Texten und Bildern col-md-12 gegeben.

Kann mir jemand sagen, wie man das macht? (Mit Bootstrap Bilder über die ganze Breite strecken, aber Texte nicht?)

Vielen Dank im Voraus

...zur Frage

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

LG

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zur Frage

Was möchtest Du wissen?