Guten Morgen.
versuche gerade ein Layout zu machen. Das Laout das der Kunde wünscht ist neu für mich. Er möchte einen shop. Produkte sollen so aufgeteilt werden wie im layout anbei. also dachte ich an position.fixed, bottom:0px, height:auto für die äussere div. dann möchte ich 5 innere divs haben. 4 jeweils mit 15% width, der mittleren möchte ich die restlichen 40% geben. padding etc. spielt erstmal keine rolle. insgesamt box-sizing:border-box für alle elemente. ich möchte das die fünf divs von unten je nach inneren element wachsen können. und sie müssen float: left sein.
bis jetzt also:
Code:
.logosOuter{
position:fixed;
z-index:999;
left:0px;
right:0px;
bottom:0px;
height:auto;
min-height:100px;
}
.pictureRow{
position:absolute;
float:left;
width:15%;
background-color:#111;
height:auto;
min-height:100px;
padding:2%;
border:1px solid #ececec;
bottom:0px;
}
.picture{
width:100%;
height:auto;
min-height:146px;
float:none;
padding:1px;
border:1px solid #ececec;
}
und für html:
Code:
<div class="logosOuter">
<div class="pictureRow">
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
</div>
<div class="pictureRow"></div>
<div class="video"></div>
<div class="pictureRow"></div>
<div class="pictureRow"></div>
</div>
was mache ich falsch? und wie bekomme ich es hin das sie von unten wachsen und immer links angehängt werden? von den logosOuter möchte er übrigens drei haben zum wechseln per slider mit buttons rechts und links. darüber mache ich mir danach noch gedanken.
float: left und position: absolute gehen nicht miteinander nehme ich an. wie wäre es wenn ich allen unterschiedlich margin gebe von 15%,30%,45%... usw.. Wäre das aber eine eleganten Lösung? und würden die margins nicht die links überlappen? ich teste weiter. vielleicht hat aber jemand ne gute lösung..