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

Flexibles 3 Div Konstrukt

Marv

Mitglied
Hallo zusammen,

ich suche eine Lösung bei der 3 Divs nebeneinander sind:


  • Das linke und rechte Div sollen jeweils vom Rand bis zum mittleren Div gehen. Beide sollen die selbe Breite haben, da das mittlere Div (horizontal) zentriert sein soll.
  • Das mittlere Div ist mal breiter mal schmaler (Also Flexibler Inhalt)
Wie schaffe ich es, dass bei unterschiedlicher Breite des mittleren Divs trotzdem die äußeren divs immer vom äußeren Rand bis zum mittleren Div gehen?

Es soll eine zentrierte Headline ergeben die links und rechts eine bis zum Rand führende Linie hat.

Vielen Dank im Voraus
Marv
 
Zuletzt bearbeitet:
Werbung:
HTML:
<div class="links">linker Inhalt</div>
<div class="rechts">rechter Inhalt</div>
<div class="mitte">mittlerer Inhalt</div>

Code:
.links { float: left;width: 200px; }
.rechts { float: right;width: 200px; }
.mitte { margin: 0 200px; }

Sollte klappen. Nur bei .mitte bin ich mir gerade nicht sicher.
 
Hallo threadi,
erstmal danke für Deine Antwort.
im Prinzip ist das so richtig, nur dass in Deinem Beispiel die äußeren Container ja eine feste Breite haben.
Diese müssten aber eigentlich Flexibel bleiben und ja nach Inhalt des mittleren Divs Größer oder kleiner werden.
Deshalb überlege ich gerade, ob es mit CSS und ohne Javascript überhaupt möglich ist.

Eine Lösung die ich schon probiert habe, wäre einen Div-Container mit einer Linie als Background zu erstellen,
und da drin dann die h1 Überschrift, welche einen weißen Background hat. so sähe es bei weißen Hintergrund dann so aus,
als würde die Linie (des Backgrounds) nur bis zur Überschrift und nicht dahinter weiter verlaufen.


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Titel</title>

<style type="text/css">
.wrapper	{
	width:960px;
	margin:0 auto;
	padding-top:20px;
}

h1	{
	background-color:white;
	padding:0 10px;
	display:inline;
	margin:0;
	line-height:10px;
}

.headline-wrapper	{
	background-color:red;
	text-align:center;
}


</style>
</head>
<body>

<div class="wrapper">
	<div class="headline-wrapper">
		<h1>Meine Überschrift</h1>
	</div>
</div>

</body>
</html>

Da ich aber keinen weißen oder andersfarbigen Background habe, sondern ein kompliziertes Muster, funktioniert der Trick bei meiner Webseite leider nicht.
Es müsste eigentlich der Background des headline-wrappers an der stelle der Überschrift ausgeblendet / ausgeschnitten werden.
Was sich nach HTML Canvas anhört (Wo ich mich nicht gut auskenne) würde ich das aber aufgrund der HTML5 Kompatibalitäten noch weglassen.
 
Werbung:
Zurück
Oben