• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

float left und margin 0 auto Problem

N

Nikita

Mitglied
Hallo zusammen,

mal wieder bin ich wohl betriebsblind und bräuchte mal eure Erleuchtung :oops:
Folgendes:
ich will 3 nebeneinander gefloatete divs mittig vom browser positionieren aber leider möchte das so ganz und gar nicht funktionieren. Ich hätte gedacht, wenn das Elternelement width: auto hat und n margin: 0 auto bekommt würde das so funtzen aber offensichtlich weit gefehlt...
Weiß einer was ich übersehe/nicht verstehe?

hier mein HTML:
HTML: 
<div class="top-container" style="height: auto; top: 0px;">
    <div class="text-container">
        <div class="info-text-out">
            <div class="list-text">text here</div>
            <div class="list-text">text here</div>
            <div class="list-text">text here</div>
        </div>
    </div>
</div>

Dazu die CSS:
Code: 
.top-container{
  font-size: 2.5em;
  height: 10%;
  line-height: 2.5em;
  position: absolute;
  top: 0;
  padding:1% 0;
}

.top-container .text-container{
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.top-container .text-container .info-text-out{
  margin: 0 auto;
  padding: 0;
  width: auto;
}
.top-container .text-container .list-text{
  color: rgba(255, 255, 255, 0.75);
  float: left;
  margin-left: 2%;
  margin-right: 2%;
}

danke schonmal für eure Mühe :)

LG Niki
 
na die list-text div's sitzen halt nicht mittig da das info-text-out immer die volle breite anzeigt und sich nicht nach seinem Inhalt richtet. gecleart wird momentan ja im text-container hab ich auch schon im info-text-out versucht hat auch keine Auswirklung gehabt
 
flexbox... natürlich.. ich Dummerchen :oops:
ich danke dir für diese Erleuchtung! Das hat mein Problem natürlich behoben :D
 
Auch wenn's erledigt ist. So würde es auch gehen.
Code: 
<!Doctype Html>
<html>
<head>
<meta charset="utf-8">
<title>display:inline-block geht auch</title>

<style>
.top-container{
 background:#aaa;
 font-size:2.5em;
 line-height: 2.5em;
 text-align:center;
}
.list-text {
 display:inline-block;
}
.list-text{
  color: #000;
  background:#ada;
  padding:10px;
}

</style>
</head>
<body>
<div class="top-container">
  <div class="list-text">text here </div>
  <div class="list-text">text here</div>
  <div class="list-text">text here</div>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben