moin zusammen,
da mein letzter Thread leicht "missbraucht" wurde, fasse ich mein Problem hier nochmal übersichtlich zusammen.
Ich bin gerade dabei das Standardlayout für meine Seite zu entwerfen. Eigentlich ja ganz simpel:
- header
- links die navi
- daneben der content (orange)
- dadrunter der footer
Das Ergebnis sieht wie folgt aus:
1. Problem:
Warum nimmt der content-div (orange) nicht die restliche Breite ein?? Nehmen <div> nicht normalerweise automatisch die komplette Breite ein, wenn man das nicht beschränkt?
2. Problem/Frage:
Eine Generelle Frage zur float Eigenschaft:
Das die Navi nen float:left bekommt ist soweit klar, schließlich soll sie links stehen und rechts "umflossen" werden.
Was ich nicht so ganz verstehe ist, warum der content auch die float:left Eigenschaft braucht?! Wenn ich die weglasse, fängt der content-Bereich ja ganz links unter der navi an. Seit ich die Eigenschaft dazu genommen habe, besteht das 1. Problem, nämlich dass der content nicht mehr die volle Breite einnimmt.
Ich hoffe, mein Problem ist jetzt deutlich geworden
Hier noch der aktuelle Code:
HTML:
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Testprojekt</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="maincontainer">
<div id="header"> Header</div>
<div id="mainnav"> Link <br> link<br> link<br> link</div>
<div id="content">aaaaaa bbbbbbbbbbbb cccccccccccccc dddddddddddd eeeeeeeeee</div>
<div id="footer"> Footer</div>
</div> <!-- /container -->
</body>
CSS
Code:
body
{
background-color: #e1ddd9;
font-size: 12px;
font-family: Arial;
color:#564b47;
padding:0px;
margin:0px;
}
#maincontainer
{
margin: auto;
background-color:#00FFFF;
width: 800px;
height:600px;
}
#header
{
background-color:#FF00FF;
height: 80px;
margin-bottom: 5px;
}
#mainnav
{
width:150px;
float:left;
background-color:#00FF00;
margin-bottom: 5px;
}
#content
{
background-color:#ffA500;
margin-left:10px;
margin-right:10px;
float:left;
}
#footer
{
clear:both;
background-color:#FF0000;
}