Dynamische div's

Willforce · Feb 8, 2010

Ich will 3 div Container nebeneinander platzieren. Dabei sollen die beiden äußeren eine dynamische Breite erhalten. Der mittlere hat eine feste Größe.
Am Ende sollen die drei die volle Breite im Browserfenster ausfüllen.
Wer hat einen Lösungsvorschlag?
Ich will das nur mit CSS machen. Mit Javascript geht das auch, will ich aber nicht.

LaG astrau · Feb 8, 2010

AW: Dynamische div's

Hi Willforce,

guck mal ob hier was bei ist:

http://intensivstation.ch/templates/

Willforce · Feb 8, 2010

AW: Dynamische div's

Alles dabei, nur nicht das was ich brauche.
Ich werde wohl oder übel auf eine 3-spaltige Tabelle zurückgtreifen müssen. Auch wenn mir das nicht gefällt.

mitcharts · Feb 8, 2010

AW: Dynamische div's

Natürlich ist das was du suchst mit dabei ... ansatzweise.

http://intensivstation.ch/files/templates/3/intensivstation-template-3-07.html

Du musst das Stylesheet nur entsprechend anpassen.

LaG astrau · Feb 9, 2010

AW: Dynamische div's

Wenn ich heute zwischendurch Zeit habe, kann ich das aber auch eben schribseln. So als Angebot. Sag eben Bescheid!

Spacerat · Feb 9, 2010

AW: Dynamische div's

Code:

.linkercontainer {
   float: left;
   width: 200px;
}

.mittlerercontainer {
   float: left;
}

.rechtercontainer {
   float: right;
   width: 200px;
}

<div class="linkercontainer">Inhalt 1</div>
<div class="mittlerercontainer">Inhalt 2</div>
<div class="rechtercontainer">Inhalt 3</div>

Das hier mal ungetestet!

mitcharts · Feb 9, 2010

AW: Dynamische div's

@spacey
Die beiden äußeren Container sollen eine dynamische Breite erhalten und keine feste!

Edit:
Ich hätte da etwas für dich willforce:

CSS-Code:

Code:

/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */

body {
	background-color: #e1ddd9;
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#564b47;
	padding:0;
	margin:0;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #000000;}
a:active { color:#000000;}


h1 {
	font-size: 2em; 
	font-weight: normal;
 }

h2 {
	font-size: 1.7em;
	font-weight: normal;
}

img.download {vertical-align:middle;}

/* ----------navigation u. banner-------------- */
#banner {
	margin: 0;
	padding: 0;
	background-color: #EBD3E0;
}
#banner p{
	margin-left: 15em;
	padding: 10px;
}
#mainnavi {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #E0A3B7;
}

#mainnavi p{
	margin-left: 15em;
	padding: 0 10px;
}

/* ----------container zentriert das layout-------------- */
#container1 {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

#container2 {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* -----------------Inhalt--------------------- */
#content {
	width: 1000px;
	min-height: 600px;
	background-color: #ffffff;
	padding: 0;
	margin: 0 auto;
}

/* --------------left navigavtion------------- */
#left {
	float: left;
	/*width: 15em;*/
	margin: 0;
	padding:0;
	color:#ffffff;
}

/* --------------right navigavtion------------- */
#right {
	float: right;
	/*width: 15em;*/
	margin: 0;
	padding: 0;
	color:#ffffff;
}

/* -----------footer--------------------------- */
#footer {
	clear: both;
	background-color: #ffffff;
	text-align: center;
	padding: 0;
	margin: 0 auto;
}

HTML-Code:

Code:

<!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>
<link type="text/css" href="willforce.css" rel="stylesheet" media="screen" />
<title>willforce</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- Basic template by monorom at www.intensivstation.coh -->

<div id="container1">
	<div id="banner">
		<img src="banner.gif" alt="" border="0"/>
	</div>
	<div id="mainnavi" >
 		Plaltzhalter Hauptnavigation
	</div><!-- end mainnavi -->
</div>
<div="container2">
	<div id="left">links dynamisch
	</div><!-- end menu left -->
	<div id="right">rechts dynamisch
	</div><!-- end menu right -->
	<div id="content">
		Mitte fest auf 500px Breite
	</div><!-- end content -->
</div><!-- end container -->
<div id="footer">footer</div><!-- end footer -->
</body>
</html>

Das Gesamtpaket findet sich im Anhang.

Quelle war das von mir schon verlinkte Layout, ich hab es entsprechend angepasst.

Spacerat · Feb 9, 2010

AW: Dynamische div's

Argh, dann hab ich ads nur verdreht, bin halt übermüdet die width's zu versetzen in den mittleren Container sollte ja kein Ding sein

Willforce · Feb 9, 2010

AW: Dynamische div's

@all

Danke für eure Hilfe!
Bin heute Früh bereits selbst darauf gekommen, nachdem ich mich in voller Frische vor dem Rechner gesetzt habe.
Man sollte halt einfach mal zwischendurch ne Pause machen.

Meine Lösung:

Code:

head_out    {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    }

.head_left    {
    position:relative;
    float:left;
    margin:0;
    padding:0;
    height:363px;
    width:50%;
    background:url(../images/design/head_left.png) repeat-x;
    z-index:100;
    }

.head_mid    {
    position:relative;
    width: 865px;
    height: 363px;
    padding: 0;
    margin: 0 auto;
    background:url(../images/design/head_mid.jpg);
    z-index:200;
    }

.head_right    {
    position:relative;
    float:right;
    margin:0;
    padding:0;
    height:363px;
    width:50%;
    background:url(../images/design/head_right.jpg) repeat-x;
    z-index:100;
    }

Code:

<div class="head_out">
 <div class="head_left"></div>
 <div class="head_right"></div>
 <div class="head_mid"></div>
</div>

Um es bildlich zu veranschaulichen, schaut euch den Head an.

mitcharts · Feb 9, 2010

AW: Dynamische div's

Du weißt aber schon, dass du innerhalb des head_out-Containers mit einer 100%igen Breite und einer zusätzlichen Breite von 865px arbeitest!?
Das Ganze wird nur durch den z-index "verschleiert".

Die Variante ist nicht wirklich sauber.

Schau dir mal meines an.

Willforce · Feb 9, 2010

AW: Dynamische div's

Ich weiß dass es nicht die sauberste variante ist. Funktioniert aber.

Bei deiner Variante sind die beiden äußeren divs nur so breit wie der Inhalt es vorgibt.
Ich brauche sie aber in einer Breite, so dass bei jeder Auflösung die volle Breite gegeben ist.
Ich könnte es alternativ mit Javascript oder einer Tabelle lösen, wobei die Tabelle das einfachste wäre.
Ich will aber UNBEDINGT eine CSS Lösung haben.

mitcharts · Feb 9, 2010

AW: Dynamische div's

Willforce said: ↑

Dabei sollen die beiden äußeren eine dynamische Breite erhalten. Der mittlere hat eine feste Größe.
Click to expand...

Willforce said:

Ich brauche sie aber in einer breite, so dass bei jeder Auflösung die volle Breite gegeben ist.
Click to expand...

Merkste was ... !?

Die beiden äußeren Container bei mir sind so groß wie es der mittlere Container vorgibt, sprich 100% - Größe mittlerer Container.
Also genau nach deinen ursprünglichen Angaben.

LaG astrau · Feb 9, 2010

AW: Dynamische div's

Im 8er IE mit aktiviertem Kompatibilitätsmodus (also sowas wie dem 7er) zerhauts das Design. (Anhang)

Safari, Firefox, IE8 normal, Chrome, Flock, Opera, .. sahen gut aus.

PS: Mitcharts Beispiel passt doch!

Willforce · Feb 9, 2010

AW: Dynamische div's

Hmmm, muss ich nochmal schaun. Werde dass schon noch hinbekomen.
Werde als Übergang erstmal eine Tabelle verwenden, da ich noch nicht weiß ob das ganze überhaupt so angenommen wird.

/* Der scheiß IE muss immer Probleme machen!
Wann wird der endlich abgeschafft?!?! */

mitcharts · Feb 9, 2010

AW: Dynamische div's

Ob es angenommen wird oder nicht, sei mal dahingestellt ... aber mein Beispiel (ja, ich reite darauf rum ...) funktioniert sowohl im IE als auch im Firefox!

Schaust du dir überhaupt an, was man dir bietet?

Dynamische div's - Similar Threads - Dynamische div's	Forum	Date
tado° und Midea bringen Kühl-Set mit dynamischen Stromtarifen tado° und Midea bringen Kühl-Set mit dynamischen Stromtarifen: tado° und Midea bringen Kühl-Set mit dynamischen Stromtarifen tado° hat sich nun mit Midea zusammengetan und schnürt ein Paket aus der mobilen Klimaanlage PortaSplit und der hauseigenen smarten...	User-Neuigkeiten	Jun 9, 2026
Nvidia GeForce: Dynamische Multi-Frame-Generation ausprobiert Nvidia GeForce: Dynamische Multi-Frame-Generation ausprobiert: Nvidia GeForce: Dynamische Multi-Frame-Generation ausprobiert So kommt eine dynamische Komponente hinzu. Das heißt im Klartext, dass ihr nicht stur einen festen Multiplikator wie 2x, 4x oder 6x...	User-Neuigkeiten	May 2, 2026
Nvidia DLSS 4.5: Dynamische 6x-Multi-Frame-Generation startet Nvidia DLSS 4.5: Dynamische 6x-Multi-Frame-Generation startet: Nvidia DLSS 4.5: Dynamische 6x-Multi-Frame-Generation startet Das neue Upscaling-Modell könnt ihr auch schon seit einigen Wochen nutzen. Teil der neuen Suite ist aber auch die aufgepeppte...	User-Neuigkeiten	Mar 31, 2026
Nvidia DLSS 4.5: Dynamische Multi Frame Generation (MFG) startet am 31.03.2026 Nvidia DLSS 4.5: Dynamische Multi Frame Generation (MFG) startet am 31.03.2026: Nvidia DLSS 4.5: Dynamische Multi Frame Generation (MFG) startet am 31.03.2026 So soll diese ab 31. März 2026 zur Verfügung stehen. Nvidia DLSS 4.5: Dynamische Multi Frame Generation (MFG)...	User-Neuigkeiten	Mar 16, 2026
PlayStation Store: Sony experimentiert mit dynamischen Preise und personalisierten Rabatten PlayStation Store: Sony experimentiert mit dynamischen Preise und personalisierten Rabatten: PlayStation Store: Sony experimentiert mit dynamischen Preise und personalisierten Rabatten Dafür streicht man natürlich eine satte Provision ein. Es gibt im Store freilich auch regelmäßig...	User-Neuigkeiten	Mar 9, 2026
Equinox: Kostenloses Tool für dynamische macOS-Wallpaper in neuer Version Equinox: Kostenloses Tool für dynamische macOS-Wallpaper in neuer Version: Equinox: Kostenloses Tool für dynamische macOS-Wallpaper in neuer Version Apple liefert zwar standardmäßig einige Varianten mit, wer jedoch eigene Bilder nutzen möchte, stößt mit Bordmitteln...	User-Neuigkeiten	Feb 6, 2026
IKEA und Svea Solar: Dynamischer Stromtarif mit Rabatt für Mitglieder IKEA und Svea Solar: Dynamischer Stromtarif mit Rabatt für Mitglieder: IKEA und Svea Solar: Dynamischer Stromtarif mit Rabatt für Mitglieder Nun kooperiert auch das schwedische Möbelhaus IKEA mit dem Partner Svea Solar, um unter dem Namen „Svea Strom“ ein...	User-Neuigkeiten	Jan 21, 2026
Anker SOLIX: Software-Update bringt Unterstützung für dynamische Stromtarife und viele Anbieter Anker SOLIX: Software-Update bringt Unterstützung für dynamische Stromtarife und viele Anbieter: Anker SOLIX: Software-Update bringt Unterstützung für dynamische Stromtarife und viele Anbieter Ein frisches Software-Update sorgt dafür, dass die Speicherlösungen nun besser mit dynamischen...	User-Neuigkeiten	Jan 12, 2026
Nvidia stellt DLSS 4.5 und dynamische Frame-Generierung vor Nvidia stellt DLSS 4.5 und dynamische Frame-Generierung vor: Nvidia stellt DLSS 4.5 und dynamische Frame-Generierung vor Das hat es in sich, denn DLSS 4.5 führt nicht nur ein verbessertes Transformer-Modell der 2. Generation für das Upscaling ein, sondern...	User-Neuigkeiten	Jan 7, 2026
Bundesnetzagentur: Transparenzplattform SMARD visualisiert dynamische Strompreise Bundesnetzagentur: Transparenzplattform SMARD visualisiert dynamische Strompreise: Bundesnetzagentur: Transparenzplattform SMARD visualisiert dynamische Strompreise Ziel der Übung ist mehr Durchblick für den Verbraucher, der so die Preisentwicklung im Markt besser...	User-Neuigkeiten	Dec 2, 2025
Spotify: Prompt Playlist ermöglicht dynamische Playlists per KI-Prompt Spotify: Prompt Playlist ermöglicht dynamische Playlists per KI-Prompt: Spotify: Prompt Playlist ermöglicht dynamische Playlists per KI-Prompt Nutzer können da mithilfe von Textanweisungen Playlists erstellen. Die Aufforderungen durch den Hörer können sich auf die...	User-Neuigkeiten	Nov 27, 2025
Dynamische Preise beim Ultraschnellladen: Shell startet deutschlandweites Pilotprojekt Dynamische Preise beim Ultraschnellladen: Shell startet deutschlandweites Pilotprojekt: Dynamische Preise beim Ultraschnellladen: Shell startet deutschlandweites Pilotprojekt Das Pilotprojekt umfasst laut des Unternehmens mehr als 1.600 Ladepunkte im Bundesgebiet und orientiert sich...	User-Neuigkeiten	Jul 1, 2025
Google Passwort-Manager: Dynamische Farben und verbesserte Benutzeroberfläche Google Passwort-Manager: Dynamische Farben und verbesserte Benutzeroberfläche: Google Passwort-Manager: Dynamische Farben und verbesserte Benutzeroberfläche Nachdem bereits Anwendungen wie Google Drive und die Telefon-App eine visuelle Überarbeitung erhalten haben, ist nun...	User-Neuigkeiten	Jun 25, 2025

Dynamische div's

Attached Files:

willforce.zip

Attached Files:

willforce.jpg

Dynamische div's

Dynamische div's - Similar Threads - Dynamische div's

tado° und Midea bringen Kühl-Set mit dynamischen Stromtarifen

Nvidia GeForce: Dynamische Multi-Frame-Generation ausprobiert

Nvidia DLSS 4.5: Dynamische 6x-Multi-Frame-Generation startet

Nvidia DLSS 4.5: Dynamische Multi Frame Generation (MFG) startet am 31.03.2026

PlayStation Store: Sony experimentiert mit dynamischen Preise und personalisierten Rabatten

Equinox: Kostenloses Tool für dynamische macOS-Wallpaper in neuer Version

IKEA und Svea Solar: Dynamischer Stromtarif mit Rabatt für Mitglieder

Anker SOLIX: Software-Update bringt Unterstützung für dynamische Stromtarife und viele Anbieter

Nvidia stellt DLSS 4.5 und dynamische Frame-Generierung vor

Bundesnetzagentur: Transparenzplattform SMARD visualisiert dynamische Strompreise

Spotify: Prompt Playlist ermöglicht dynamische Playlists per KI-Prompt

Dynamische Preise beim Ultraschnellladen: Shell startet deutschlandweites Pilotprojekt

Google Passwort-Manager: Dynamische Farben und verbesserte Benutzeroberfläche

Dynamische div's solved

SysProfile Windows Foren

Hardware Foren