Flexibles 3 Div Konstrukt

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

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
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:

threadi

Moderator
Teammitglied
Moderator
20 Oktober 2006
15.390
304
83
Leipzig
www.comedy-news.de
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.
 

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
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: