CSS DIVs verschieben sich nach Textinhalt

[david22]

Hallo zusammen,

ich habe mal wieder ein kleines CSS Problem.

Mein CSS Code ist folgender:

  #main { margin: 10px 0; padding: 20px; background: #fff;}
 
#box {
display: table;
    width:100%;
  }
      
  #date {
width: 11%;
background-color:green;
      }
      
  #title {
width: 74%;
display: table-cell;
vertical-align: middle;
background-color:red;
      }
      
  #link {
width: 15%;
background-color:green;
      }

Der HTML Code ist:

    <div id="main">

        <div id="box">

            <div id="date">
                <p>Hier kommt Text rein</p>
                </div>
                
                <div id="title">
                <p>Hier kommt Text rein</p>
                </div>
                
                <div id="link">
                <a href="">Hier kommt ein Link rein</a>
                </div>
                
            </div>
        </div>
        
        <div id="box">

            <div id="date">
                <p>Hier kommt ein langer Text rein</p>
                </div>
                
                <div id="title">
                <p>Hier kommt Text rein</p>
                </div>
                
                <div id="link">
                <a href="">Hier kommt ein Link rein</a>
                </div>
                
            </div>
        </div>
                
    </div>

Das ergibt diese Ausgabe:

Nun mein Problem. Ich habe zur besseren Sichtbarkeit die DIVs eingefärbt. Ich will, dass der linke DIV Container (#date) bis zum roten Container läuft. Der rote Container (#title) soll sich nicht in der Position verändern, nur weil der linke Text länger ist.
Hoffe, ihr versteht mein Problem. Ich habe im CSS Code diese Prozentangaben gemacht, aber leider funktioniert es nicht.

Könnt Ihr mir dabei helfen?

 

[netzgestaltung]

Hi,

zunächst mal: dein HTML ist invalide, da ID Attribute nur einmalig vergeben werden dürfen. zb:

<div id="date-1">

zu wiederverwendung gibt es das CLASS Attribute:

<div class="date">

im CSS ist das dann mit . statt # ansprechbar.

ich würde es so lösen:

<div id="main">

  <div class="box">
    <div class="date">
      <p>Hier kommt Text rein</p>
    </div>
    <div class="title">
      <p>Hier kommt Text rein</p>
    </div>
    <div class="link">
      <a href="">Hier kommt ein Link rein</a>
    </div>
    </div>
  </div>
 
  <div class="box">
    <div class="date">
      <p>Hier kommt ein langer Text rein</p>
    </div>
    <div class="title">
      <p>Hier kommt Text rein</p>
    </div>
    <div class="link">
      <a href="">Hier kommt ein Link rein</a>
    </div>
    </div>
  </div>
 
</div>

 #main { margin: 10px 0; padding: 20px; background: #fff;}
 
.box {
  position:relative;
  padding-left:11%;
  padding-right:15%;
}
.date,
.link{
  position:absolute;
  top:0;
  height:100%;
}
.date {
  left:0;
  width: 11%;
  background-color:green;
}
   
.title {
  background-color:red;
}
   
.link {
  right:0;
  width: 15%;
  background-color:green;
}

Ansonsten siehst du eben, das 11% für längere/variable Texte nicht gerade viel sind. Und für mobil ist die ganze Anordnung neu zu denken. Daher würde ich mir nochmal eine Alternative einfallen lassen. (zb icon mit Title?)

 

[r00tk1d]

Wie beim letzten mal schon angesprochen wurde, schau dir Tutorials an dann erledigen sich die Problemchen von selbst.

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

 

[david22]

Danke schonmal. Die Ausgabe sieht jetzt so aus:

Geht es noch, dass Die ersten beiden Container gleich lang sind? Das wäre optimal.

@ r00tk1d Danke für den Link. Das Video werde ich mir demnächst mal anschauen.