Breite zweiter DIV-Container angleichen?

D

Decomposition

Mitglied
Hallo,

eigentlich ein leidiges Thema, jedoch habe ich noch keine gute Lösung finden können.
Ich habe zwei Div-Container, bei dem der eine sich an die Breite des anderen dynamisch anpassen soll.

Ein Beispiel, wie es in meinem Layout ausschaut, findet ihr im Anhang. Die rot markierten Bereiche sind Grafiken, die wiederrum als eigene Container an die beiden mittleren Container angesetzt sind.

Im unteren Container befinden sich Überschriften, die entsprechend in der Länge variieren. Die obere Leiste soll sich nun in der Breite entsprechend so anpassen, dass die Endstücke der beiden Container immer genau übereinander stehen, so wie im Beispielbild dargestellt.

Hat jemand eine Idee wie man das umsetzen könnte? Habe diesen Ansatz hier versucht für meine Zwecke umzubasteln:
http://www.positioniseverything.net/...ut/equalheight

... aber das scheint nur auf die Höhe bezogen zu funktionieren, leider.

Danke für eure Hilfe!
 

Anhänge

  • sample2.jpg
    sample2.jpg
    13,7 KB · Aufrufe: 7
Die Breite eines Block-Elements (z.B. <div>) orientiert sich ohne spezielle CSS-Formatierung an dem horizontalen Anzeigebereich seines Elternelements (oberste Ebene das <body>-Element).

Soll sich die Breite stattdessen durch seinen Inhalt ergeben, ist hierfür die float-Eigenschaft dienlich.
 
Zum Verständnis ein heruntergebrochenes Praxis-Beispiel.

Das Elternelement (.parentBox) beinhaltet zwei Kindelemente (.childBox) und ist u.a. mit float:left formatiert, um es aus seinem Textfluß zu nehmen, in dem es normalerweise einen automatischen Absatz erzeugt, und, wie im letzten Post erwähnt, den horizontalen Anzeigebereich seines Elternelements vom linken bis zum rechten Rand vollständig ausfüllt, unabhängig wie lang die Zeichenkette in der Zeile ist.

Mit Anwendung dieser CSS-Formatierung ergibt sich die Boxenbreite nun durch ihren Inhalt (hier: die längere Zeichenkette), wobei hingegen die inneren nachfolgenden Boxen, für ein Block-Element typisch, dessen horizontalen Anzeigebereich komplett ausfüllen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
      <meta name="author" content="spicelab" />
      <meta name="date" content="2010-10-06" />
      <title>...</title>
      <style type="text/css">
        /* <![CDATA[ */
          .parentBox {
          float:left;
          padding:10px 0;
          border:thin solid #ddd;
          }
          .childBox {
          background:#ddd;
          color:#000;
          }
          .marginTop {
          margin-top:10px;
          }
        /* ]]> */
      </style>
    </head>
    <body>
      <div class="parentBox">
        <div class="childBox">Beliebig viele Textzeichen.</div>
        <div class="childBox marginTop">Und hier beliebig viele Textzeichen mehr.</div>
      </div>
    </body>
</html>
 
Zuletzt bearbeitet:
Eine sehr gute Lösung! Einziges Problem: Wie bekomme ich den Zwischenraum zwischen dem linken Start-Icon und dem rechten End-Icon hin? Hintergrundfarbe kann ich hier nicht setzen, da die Grafiken transparente Gifs sind und der Hintergrund durchscheinen soll.

Hier mein aktueller Code:

Code: 
<style type="text/css">
.hd {
	float:left;
	}

.hd_top {	
	}
	
.hd_top_left {
	float:left;
	background-image:url(img/hd_top_left.gif);
	background-repeat:no-repeat;
	height:6px;
	width:6px;
	}

.hd_top_right {
	float:right;
	background-image:url(img/hd_top_right.gif);
	background-repeat:no-repeat;
	height:6px;
	width:99px;
	}

.hd_bottom {
	float:left;
	margin-top:4px;
	}

.hd_bottom_left {
	float:left;
	background-color:#fff;
	height:24px;
	}

.hd_bottom_right {
	float:left;
	background-image:url(img/hd_bottom_right.gif);
	background-repeat:no-repeat;
	height:24px;
	width:34px;
	}
</style>

<div class="hd">
	<div class="hd_top">
    	<div class="hd_top_left"></div>
        <div class="hd_top_right"></div>
    </div>
    <div class="hd_bottom">
    	<div class="hd_bottom_left">Headline lorem ipsum </div>
        <div class="hd_bottom_right"></div>
    </div>
</div>
 
Dich interessiert, wie sich in .hd_top der mittlere Bereich mit einem variablen Hintergrund ausfüllen lässt?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
      <meta name="author" content="spicelab" />
      <meta name="date" content="2010-10-07" />
      <title>...</title>
      <style type="text/css">
        /* <![CDATA[ */
          .hd {
          float:left;
          }

          .hd_top_left {
          float:left;
          background-image:url(img/hd_top_left.gif);
          background-repeat:no-repeat;
          height:6px;
          width:6px;
          }

          .hd_top_right {
          float:right;
          background-image:url(img/hd_top_right.gif);
          background-repeat:no-repeat;
          height:6px;
          width:99px;
          }

          /* *** NEU *** */
          .hd_top_center {
          height:6px;
          margin:0 99px 0 6px;
          background:#000;
          }
          /* *** NEU *** */

          .hd_bottom {
          float:left;
          margin-top:4px;
          }

          .hd_bottom_left {
          float:left;
          background-color:#fff;
          height:24px;
          }

          .hd_bottom_right {
          float:left;
          background-image:url(img/hd_bottom_right.gif);
          background-repeat:no-repeat;
          height:24px;
          width:34px;
          }
        /* ]]> */
      </style>
    </head>
    <body>
      <div class="hd">
        <div class="hd_top">
          <div class="hd_top_left"></div>
          <div class="hd_top_right"></div>
          <!-- *** NEU *** -->
          <div class="hd_top_center">&nbsp;</div>
          <!-- *** NEU *** -->
        </div>
        <div class="hd_bottom">
          <div class="hd_bottom_left">Headline lorem ipsum </div>
          <div class="hd_bottom_right"></div>
        </div>
      </div>
    </body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück