2 DIVs nebeneinander ganzheitlich zentriert

SchlechterInformatiker · #1 (**permalink**) 11.11.2009, 23:20

Hallo,
ich habe folgende Problemstellung:

-zwei DIVs sollen nebeneinander angeordnet werden - zur Vereinfachung sind diese gleich hoch und sollen auf gleicher Höhe sein.

-diese zwei DIVs sind unterschiedlich breit. Die Breite keines der DIVs ist bekannt sondern richtet sich nach dem Inhalt

-die zwei DIVs sollen als Ganzes zentriert sein auf der Seite (bzw. in einem beinhaltenden DIV)

-Zumindest der Internet-Explorer 7 sollte das noch mitmachen.

Geht das mit reinem CSS? ODer müss ich hier mit einer HTML-Tabelle layouten?

Hier mal ein Beispiel-Code (div.links und div.rechts haben hier eine definierte Breite, aber das ist nur damit man was sieht wenn man es mit einem Browser anzeigen lässt. In Wirklichkeit wird deren Breite unbekannt sein.

Hier passt irgendwie gar nix. div.links ist sogar im Firefox breiter als div.rechts

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>
   Titel
  </title>
  <style type="text/css">
   body
   {
    background-color:rgb(194,194,194);
   }
   div.haupt
   {  
    position:absolute;
    margin:0 auto;
    width:1024px;
    left:50%;
    top:0px;
    margin-left:-512px;
    text-align:center;
    background-color:white;
    height:100%;
   }
   div.links
   {
    width:200px;
    background-color:cyan;
    float:left;
   }
   div.rechts
   {
    width:300px;
    background-color:yellow;    
   }
  </style>
 </head>
 <body>
  <div class="haupt">
   <div class="links">Links</div>
   <div class="rechts">Rechts</div> 
  </div>
 </body>
</html>

monran · #2 (**permalink**) 12.11.2009, 00:54

Code:

margin-left:-512px;

so sowieso nicht..

schau dir mal die beispiele hier im forum an..http://xhtmlforum.de/40267-faq-h-ufi...und.html#faq10

SchlechterInformatiker · #3 (**permalink**) 12.11.2009, 02:29

Danke für deine Antwort erst mal.

Wenn ich das richtig sehe, wird da vertikal zentriert mit

Zitat:

height:50%;
margin-bottom:-13.75em;

Ist das nicht das gleiche wie

Zitat:

margin-left:-512px;

abgesehen davon dass es sich einmal um hoizontale und einmal um vertikale zentrierung geht?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 divs nebeneinander	smartexport	CSS	6	16.04.2010 16:22
Divs nebeneinander...	Sengi	CSS	4	23.05.2009 08:23
divs fließend nebeneinander, der letzte bis zum seitenrand	deelite	CSS	2	17.03.2009 21:04
3 divs zentriert nebeneinander	StefanE	CSS	1	04.03.2009 11:25
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32