CSS 3 Spalten - Mittlere mit fester Breite und zentriert

hemorieder · 13. März 2010

Hey,

ich habe folgendes Problem:

Ich will drei Div Container nebeneiander machen. Der Mittlere soll eine feste Breite von 700px haben.

Jeweils der Linke und der Rechte Container sollen sich dynamisch der Breite des Bildschirms anpassen. Allerdings sollen diese jeweils eine andere Hintergrundfarbe haben.

Die Variante mit nur einer Box mit "margin:0 auto" fällt damit weg.

Ich brauche wirklich drei Boxen.

Ich habe das mal versucht etwas anschaulicher zu machen

Der css code sieht so aus bis jetzt:

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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
        
        <style type="text/css">
              #links {
	                 height:100px;
	                 background-color:red;
	                 width:100%;
                         float:right;
                       }

             #mitte {
	                 height:100px;
	                 background-color:#030303;
	                 margin:0 auto;
	                 width:700px;
                         float:right;

                        }

             #rechts {
	                  height:100px;
	                  background-color:blue;
	                  width:100%;
	                  }
</style>
</head>
<body>


<div id="links"></div>
<div id="mitte"></div>
<div id="rechts"></div>


</body>
</html>

Aber leider macht das nur völligen Mist.

Wisst ihr wie ich das anstelle ?

Lg

QXARE · 13. März 2010

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Solltest die Lösung finden.

hemorieder · 13. März 2010

ne leider nicht dabei, nur dynamische mitte mit festen äußere

lararsc · 13. März 2010

Passt das für dich?

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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
        
        <style type="text/css">

             #mitte {
				position: absolute;
				left: 50%;
				margin-left: -350px;
				z-index: 0;
	            height:100px;
	            background-color:green;
	            width:700px;
            }

            #rechts {
				margin-left: 350px;
                height:100%;
                background-color:blue;

            }
			
			#rechts2{
				position: absolute;
				right: 0px;
                height:100px;
                width:50%;
            }
			
			#links {
				margin-right: 350px;
				height:100%;
                background-color:red;
            }
			
			#links2{
				position: absolute;
				left: 0px;
                height:100px;
                width:50%;
            }
</style>
</head>
<body>


<div id="links2"><div id="links">links links links links links links links links links links links links links links </div></div>
<div id="mitte"> mitte mitte mitte mitte mitte mitte mitte mitte mitte mitte mitte  mitte mitte mitte mitte mitte mitte mitte mitte mitte mitte mitte </div>
<div id="rechts2"><div id="rechts">rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts </div></div>


</body>
</html>

hemorieder · 13. März 2010

jepp danke !

Metal Overdrive · 18. Mai 2010

Von mir auch ein Danke! Genau das was ich gesucht habe.

Nur wie stelle ich es an das die 3 Spalten auch eine dynamische Höhe haben und dann alle 3 natürlich auch immer auf einer Höhe sind.

Sprich die 3 Spalten sollen sich jeweils immer dem längsten Content anpassen.

Wäre nett wenn mir da nochmal jemand weiterhelfen könnte.

Suche

CSS 3 Spalten - Mittlere mit fester Breite und zentriert

hemorieder

Lieutenant

QXARE

Lt. Commander

hemorieder

Lieutenant

lararsc

Gast

hemorieder

Lieutenant

Metal Overdrive

Cadet 1st Year

Ähnliche Themen