2017-01-02 4 views
1

gerade zurück in die Codierung und ich kann dieses einfache Problem nicht lösen, so dass jede Hilfe sehr geschätzt.Div sollte über anderen Div sein, nicht unter

Grundsätzlich sollte das 'Header-Top' (rot) Div an der Spitze sein, und das 'Header-unten' (blau) div sollte am unteren Rand sein. Das oberste div befindet sich jedoch nur unter dem unteren div. Warum ist das? Ich habe Float-, Clear- und Margin-Befehle vergeblich versucht.

danke. Code unten:

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
body{ 
 
\t background-color:#ff0; \t 
 
\t padding:0px; 
 
\t margin:0 auto; /* aligns content to touch the edge; gets rid of default spacing/margin between edge and content */ 
 
} 
 

 
/* Header */ 
 
#header-wrap{ 
 
\t background:#0F0; 
 
\t width:100%; 
 
\t height:auto; 
 
\t border-bottom: 3px solid #CCC; 
 
\t /* margin:0 auto; needed? */ 
 
} 
 
#header-top{ 
 
\t /* contains logo & title text */ 
 
\t background:#F00; 
 
\t width:960px; 
 
\t height:200px; 
 
\t margin:0 auto; /* aligns centrally */ 
 
} 
 
#header-bottom{ 
 
\t /* contains navigation menu */ 
 
\t background:#00F; 
 
\t width:960px; 
 
\t height:50px; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<link rel="stylesheet" type="text/css" href="style.css"/> 
 
<!-- Meta Tags Below --> 
 
<meta name="description" content="" /> 
 
<meta name="keywords" content="" /> 
 
<title>___________________________</title> 
 
<!-- Google Analytics Code Below --> 
 
<!-- _____________________________ --> 
 
</head> 
 

 
<body> 
 
<div id="header-wrap"> 
 

 
<div id="header-top"> 
 
<div id="header-bottom"> 
 

 
</div> 
 
</body> 
 
</html>

+0

Sie blaue Div muss absolut positioniert werden – slashsharp

+1

Ihr HTML ist unvollständig, Sie fehlen schließen div-Tags – pol

Antwort

3

Sie haben einen Syntaxfehler. Bitte schließen Sie die div Elemente.

<div id="header-wrap"> 
    <div id="header-top"></div> 
    <div id="header-bottom"></div> 
</div>