CSS div rechts und links bündig machen

[Wolly300]

Hallo zusammen,

ich habe folgende Problemstellung:

<div style="height: 100%; width: 400px; margin: 0 auto; padding: 0 20px">
 <div class="row">
     <div class="element">
       <div class="something">
         <div class="content">
        
         </div>
       </div>
   </div>
   <div class="element">
       <div class="something">
         <div class="content">
        
         </div>
       </div>
   </div>
   <div class="element">
      <div class="something">
         <div class="content">
        
         </div>
       </div>
   </div>
 </div>
</div>

.row {
  height: 200px;
  background: green;
}

.element {
  width: 33.33%;
  height: 200px;
  background: blue;
  float: left;
}

.something {
  height: 200px;
  padding: 0 6px;
 
}

.content {
  background: brown;
  height: 200px;
  width: 100%;
}

Könnt ihr euch auch hier anschauen: https://jsfiddle.net/Wolly/k3enyzp2/6/

Ich muss jetzt den rechten und linken braunen div jeweils rechts und links bünding machen, ohne das padding zur außengelegenen Seite zu entfernen.
Wie würdet ihr das machen ?


Danke für die Hilfe.

 

[basti1012]

Verstehe ich auch nicht so richtig.
Du könntest das aber auch gleich mit Flexbox machen dann wäre jeder Folge Code auch leichter zu verarbeiten.
Könnte so aussehen

Zur Lösung

Dein float Kram könnte dir später noch ärger machen.

 

[Wolly300]

Verstehe ich auch nicht so richtig.
Du könntest das aber auch gleich mit Flexbox machen dann wäre jeder Folge Code auch leichter zu verarbeiten.
Könnte so aussehen https://codepen.io/basti1012/pen/yLOZMPJ
Dein float Kram könnte dir später noch ärger machen.

Das weiß ich.

Ich soll an der Weibseite aber nur einen Bugfix machen und nicht alles neu.

 

[basti1012]

Dann erklär doch mal genau was du mit Bündig meinst ?.
Besser wäre ein Link wo man dein problem sehen kann.

 

[Gelöschtes Mitglied 36401]

Ich soll an der Weibseite aber nur einen Bugfix machen und nicht alles neu.

Manchmal endet ein Bugfix nun mal in einem Redesign.