Hallo an alle.

Ich habe beim googlen nichts hilfreiches gefunden ausser ein Beispiel, was ich mal zum tüfteln angepasst habe.

Ich habe einen Container, in den verschiedene DIV`s rein sollen.
Container
- Header
- Subnavi
- Navi - Content

Navi und Content soll nebeneinander.
Nur will das nicht.
Hab schon mit float alles probiert.

Hier mal meine BspDatei.
http://web20.mkl-server2.de/test.html
HTML:

HTML-Code:

<div class="container">
<div class="links">Inhalt der linken Spalte</div>
<div class="rechts">Inhalt der rechten Spalte</div></div>
<div class="clear"></div>

CSS:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.links {     width: 300px;     height: 200px;     border: dotted;     margin-right: 20%;     float: left; } .rechts { width:300px; height: 450px; border: dotted; float:right; width:xxx%; } .clear { clear:left; } .container {  width: 620px; }

Ohne den umschliessenden DIV Tag Container funktioniert es. Aber ich brauche es mit.

LG Daniel

Hi,

setz mal dieses Stylesheet ein:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.links {         width: 300px;         height: 200px;         border: dotted;         [b]/*margin-right: 20%;*/[/b] /* auskommentiert = deaktiviert */         float: left; } .rechts { width:300px; height: 450px; border: dotted; float:right; [b]/*width:xxx%;*/[/b] /* auskommentiert = deaktiviert */ }

Gut, der IE macht es verwunderlicherweise richtig.
Firefox nicht. Der packt die beiden DIV`s nicht in den Container.

siehe: http://web20.mkl-server2.de/test.html

*grml*

//Edit

mit position:abolute; geht es.
Aber im eigentlichen CSS geht es nicht. siehe: http://www.midi-alf.de/

Hi.

Zitat von Flame

Gut, der IE macht es verwunderlicherweise richtig.
Firefox nicht. Der packt die beiden DIV`s nicht in den Container.

siehe: http://web20.mkl-server2.de/test.html

In diesem Modell hast du vergessen, die Floatumgebung zu "clearen" - siehe http://positioniseverything.net/easyclearing.html.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.container { [b]/*position: absolute;*/[/b]  width: 760px;  border:10px solid #D8D8D8; }   [b].clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }   .clearfix {display: inline-block;}   /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */[/b]

Code :

1 2 3 4 5 6

<div class="container [b]clearfix[/b]">      <div class="header"></div>      <div class="submenu"></div>      <div class="links"></div>      <div class="content"></div> </div>

Zitat von Flame

mit position:abolute; geht es.
Aber im eigentlichen CSS geht es nicht. siehe: http://www.midi-alf.de/

Und hier hast du die clear-Eigenschaft falsch angewendet.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.container { [b]/*position: absolute;*/[/b]  width: 760px;  border:10px solid #D8D8D8;  background-image: url(../images/background.jpg); }   .footer{   height:25px;   width:760px;   text-align:center;   color:#ff0000;   background-color: Gray;   [b]clear:both;[/b] }

Code :

1 2 3 4 5 6 7

<div class="container">      <div class="header1"></div>      <div class="submenu"></div>      <div class="menu"></div>      <div class="content"></div>      [b][color=red]<!--<div class="clear">-->[/color][/b]<div class="footer"></div>[b][color=red]<!--</div>-->[/color][/b] </div>