Div Positionierungsproblem nebeneinander

[Flame]

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:

<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:

.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

 

[Maik]

Hi,

setz mal dieses Stylesheet ein:

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

 

[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

*grml*

//Edit

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

 

[Maik]

Hi.

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.

.container {
/*position: absolute;*/
 width: 760px;
 border:10px solid #D8D8D8;
}

.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 */

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

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.

.container {
/*position: absolute;*/
 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;
  clear:both;
}

<div class="container">
     <div class="header1"></div>
     <div class="submenu"></div>
     <div class="menu"></div>
     <div class="content"></div>
     <!--<div class="clear">--><div class="footer"></div><!--</div>-->
</div>