2 Div's zentrieren

pfump · 23.04.2008, 17:21

Hallo,

ich hoffe mir kann jemand helfen. Ich habe folgendes Problem:

Ich habe 5 div's welche folgendermaßen aufgebaut sind:

Ein Header mit Breite 900px und Höhe 100px
Darunter ein Nav-Menü mit Breite 900px und Höhe 35px

Darunter kommen 2 divs nebeneinander:
ein Linksmenu mit Breite 130px und Höhe 470px
ein Inhalt mit Breite 770px und Höhe 470px
Darunter noch ein Footer mit Breite 900px und Höhe 25px

Alle divs habe ich mit margin:0 auto; zentriert. Die beiden Divs
Linksmenu und Inhalt habe ich mit float:left; nebeneinander gesetzt.
Danach habe ich ein Clear-div mit clear:both und height:0 gesetzt.

Hier der html-Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Stempel - Neue HTML 4.01 Webseite</title>
        <link rel="stylesheet" type="text/css" href="sides/styles.css" />
    </head>
    <body>
        <div id="header">&nbsp;</div>
        <div id="menu_oben">&nbsp;</div>
        <div id="menu_links">&nbsp;</div>
        <div id="inhalt">&nbsp;</div>
        <div id="clear"></div>
        <div id="footer">&nbsp;</div>
    </body>
</html>

Und hier der css-Code:

Code:

*{
    padding: 0;
     margin: 0;
      background-color: #F3ECD3; 
       overflow: auto;
}
body{
    text-align:center;
}
div{
    margin: 0 auto;
}
div#header{
    height:100px;
    width:900px;
     background-color: #E2D21A;
      z-index: 2;
}
div#menu_oben{
    height:35px;
    width:900px;
     background-color: #524C0A;
      z-index: 1;
}
div#menu_links{
    height:470px;
    width:130px;
     background-color: #524C0A;
      z-index: 2;
     float:left;
}
div#inhalt{
    margin-left:0;
    margin-right:auto;
    height:470px;
    width:770px;
     background-color: #FCFAE4;
      z-index: 2;
}
div#clear{
    clear:both;
    height:0;
}
div#footer{
    height:25px;
    width:900px;
     background-color: #E2D21A;
      z-index: 1;
}

Alle divs werden korrekt zentriert, nur die beiden nebeneinander-
liegenden divs nicht.
Kann mir bitte jemand sagen wie ich die zentriert bekomme?

Mfg

Montellese · 23.04.2008, 17:31

Da überschreibt das clear-Attribute wohl die Funktionalität von margin: auto. Ich empfehle dir ein Div um die beiden zu zentrierenden Divs zu legen, das du dann zentrierst. Kann mir nicht vorstellen, dass es anders funktioniert.

pixelprinzessin · 23.04.2008, 21:10

Code:

/* Layout */

#wrapper { 
  	width: 700px;
  	margin: 0px auto;
	background: #ffffff;
	margin-bottom: 10px;
}

#header { 
  	width: 700px; 
  	height: 210px;
  	margin: 0;
  	padding-bottom: 0; padding-left: 0px; padding-right: 0px; padding-top: 0px;
  	background: url(images/header.jpg);
}

#menu { 
  	width: 122px;
  	margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;
  	padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 58px;
  	background-color: #ffffff;
  	float: left;
	clear: none;
}

#content {  
  	width: 520px;
  	margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;
  	padding-bottom: 0px; padding-left: 20px; padding-right: 20px; padding-top: 8px;
  	background-color: #ffffff;
	border-left: 1px solid #075dac;
  	float: right;
	clear: none;
}

.clr
{
clear:both;
}

#footer {
	width: 700px;
	height: 50px;
	margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;
	padding: 0px;
	background: url(images/footer.jpg)
}

das ist eine Seite von mir, die auch so aufgebaut sein soll, nur dass hier das horizontale menü nicht da ist... aber müsste ja funktionieren und hier html:

Code:

<div id="wrapper">
<div id="header"> </div>
    	<div id="menu"> </div>
        <div id="content">

</div
  <div class="clr"> </div>
	<div id="footer"></div>
</div>

Montellese · 23.04.2008, 23:32

Da hat sich im HTML-Teil ein Fehler eingeschlichen: Da fehlt ein > beim schliessenden Tag von <div id="wrapper">

cycap · 24.04.2008, 00:20

Zitat:

Zitat von Montellese

Da hat sich im HTML-Teil ein Fehler eingeschlichen: Da fehlt ein > beim schliessenden Tag von <div id="wrapper">

das ist vom content, nur beschissen eingerückt

Montellese · 24.04.2008, 08:22

Lol alles klar. So genau hab ich nicht hingeschaut. Hab mich aber schon gewundert, dass die Aufteilung der Div-Blöcke bissl komisch ist.

pixelprinzessin · 24.04.2008, 08:46

ja irgendwie ging das hier in dem editor ein bissl komisch... und hatte dann keine lust mehr das noch zu ordnen ^^ aber gehts denn nun?

pfump · 24.04.2008, 10:57

Erst mal danke für die schnellen Antworten.

Also ich hab die 2 divs in ein übergeordnetes div reingehauen
und jetzt gehts.

Aber gibt es denn keine Möglichkeit das ohne dieses "Eltern-Div" zu
machen?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIVs nebeneinander?	wers1	HTML, Usability und Barrierefreiheit	13	18.07.2008 14:26
[JS] Divs nach Datum sortieren	cycap	JavaScript, Ajax und mehr	24	16.07.2008 18:48
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
DIV's positionieren	scooter	HTML, Usability und Barrierefreiheit	10	12.01.2006 16:11
DIVs auf "echte" 100% der Seite setzen?	King2k	HTML, Usability und Barrierefreiheit	3	07.12.2005 15:15
Firefox + Divs	Anubis2183	HTML, Usability und Barrierefreiheit	10	28.05.2005 16:33
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
Tabelle im DIV-Container zentrieren		HTML, Usability und Barrierefreiheit	1	21.04.2005 22:28
div + float zentrieren	Anubis2183	HTML, Usability und Barrierefreiheit	1	18.04.2005 08:44
DIVs visible -> hidden beim Laden der Seite		HTML, Usability und Barrierefreiheit	2	03.03.2005 22:20
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
Verschachtelung von DIV's bei unterschiedlichen Auflösungen		HTML, Usability und Barrierefreiheit	8	24.12.2004 14:45


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

23.04.2008, 17:31
Montellese Erfahrener Benutzer Registriert seit: 30.07.2007 Beiträge: 541	Da überschreibt das clear-Attribute wohl die Funktionalität von margin: auto. Ich empfehle dir ein Div um die beiden zu zentrierenden Divs zu legen, das du dann zentrierst. Kann mir nicht vorstellen, dass es anders funktioniert.

23.04.2008, 23:32
Montellese Erfahrener Benutzer Registriert seit: 30.07.2007 Beiträge: 541	Da hat sich im HTML-Teil ein Fehler eingeschlichen: Da fehlt ein > beim schliessenden Tag von <div id="wrapper">

24.04.2008, 08:22
Montellese Erfahrener Benutzer Registriert seit: 30.07.2007 Beiträge: 541	Lol alles klar. So genau hab ich nicht hingeschaut. Hab mich aber schon gewundert, dass die Aufteilung der Div-Blöcke bissl komisch ist.

24.04.2008, 08:46
pixelprinzessin Erfahrener Benutzer Registriert seit: 23.04.2008 Beiträge: 270 PHP-Kenntnisse: Anfänger	ja irgendwie ging das hier in dem editor ein bissl komisch... und hatte dann keine lust mehr das noch zu ordnen ^^ aber gehts denn nun?

24.04.2008, 10:57
pfump Erfahrener Benutzer Registriert seit: 29.03.2008 Beiträge: 576	Erst mal danke für die schnellen Antworten. Also ich hab die 2 divs in ein übergeordnetes div reingehauen und jetzt gehts. Aber gibt es denn keine Möglichkeit das ohne dieses "Eltern-Div" zu machen?