kaktus: div verschachtlung

Hi bekomme es einfach nicht hin bin am verzweifeln und weis nicht wie ich meine div genau plaziere admit ich es so hinbekomme wie ich will!

Grundgenommen ist es fast fertig und sieht auch soweit gut aus
jedoch mag ich noch 2 div ramen direckt untereinander neber dem Header!
Vielleicht kann mir einer mal zeigen wie das geht!

Hier mal meine CSS Datei! und anschließend HTML Datei!

/CSS Code/
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper {
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 750px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 height: 106px;
 margin: 10px 0px 0px 0px;
 background: #DAC8BF;
}
#navigation {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 0px 0px;
 background: #BD9C8C;
}
#content {
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
}
#footer {
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

//HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 1 Column - fw-3-1-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

<!-- Begin Wrapper -->
   <div id="wrapper">

<!-- Begin Header -->
         <div id="header">

This is the Header

</div>
   <!-- End Header -->

<div id="Uhr">
         </div>

<!-- Begin Naviagtion -->
         <div id="navigation">

This is the Navigation

</div>
   <!-- End Naviagtion -->

<!-- Begin Content -->
   <div id="content">Hauptmen&uuml;

</div>
   <!-- End Content -->

<!-- Begin Footer -->
   <div id="footer">

This is the Footer

</div>
   <!-- End Footer -->

</div>
   <!-- End Wrapper -->

</body>
</html>

Hoffe mir kann einer helfen

  1. Meinst Du so:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Fixed Width CSS Layouts - 1 Column - fw-3-1-col</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <style>
    * { padding: 0; margin: 0; }

    body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
    }
    #wrapper {
     margin: 0 auto;
     width: 922px;
    }
    #header {
     width: 750px;
     color: #333;
     padding: 10px;
     border: 1px solid #ccc;
     height: 106px;
     margin: 10px 0px 0px 0px;
     background: #DAC8BF;
     float:left;
    }
    #navigation {
     width: 900px;
     color: #333;
     padding: 10px;
     border: 1px solid #ccc;
     margin: 0px 0px 0px 0px;
     background: #BD9C8C;
    }
    #content {
     width: 900px;
     color: #333;
     border: 1px solid #ccc;
     background: #F2F2E6;
     margin: 0px 0px 0px 0px;
     padding: 10px;
     height: 350px;
    }
    #footer {
     width: 900px;
     color: #333;
     border: 1px solid #ccc;
     background: #BD9C8C;
     margin: 0px 0px 10px 0px;
     padding: 10px;
    }
    div #uhr, div #nochwas
    {
     margin-left:750px;
    }
    </style>
    </head>

    <body>

    <!-- Begin Wrapper -->
       <div id="wrapper">

    <!-- Begin Header -->
             <div id="header">

    This is the Header

    </div>
       <!-- End Header -->

    <div id="Uhr">sadasd
             </div>
             <div id="nochwas">asd
             </div><br style="clear:both" />

    <!-- Begin Naviagtion -->
             <div id="navigation">

    This is the Navigation

    </div>
       <!-- End Naviagtion -->

    <!-- Begin Content -->
       <div id="content">Hauptmen&uuml;

    </div>
       <!-- End Content -->

    <!-- Begin Footer -->
       <div id="footer">

    This is the Footer

    </div>
       <!-- End Footer -->

    </div>
       <!-- End Wrapper -->

    </body>
    </html>

    1. Jein also ja schon!
      jedoch will ich das die div felder eine höhe von 53px haben damit sie genau neben den header platz finden damit keine lücken enstehen.

      1. Jein also ja schon!
        jedoch will ich das die div felder eine höhe von 53px haben damit sie genau neben den header platz finden damit keine lücken enstehen.

        Dann musst Du ihnen noch eine Höhe zuweisen (z. B. uhr -> 25px; nochwas -> 28px