✔ Box Positionieren

[emonem]

Hi,

ich habe auf der linken Seite meiner Page ein vertikales Menu erstellt.
Auf der rechten Seite befindet sich der Content Bereich welcher später per PHP include
eingefügt werden soll.
Jetzt hab ich ein Problem mit der Positionierung des content bereichs (rote box), und zwar soll diese mittig am rechten Seitenrand ausgerichtet sein.
Bei mir verschiebt es sich aber nach unten. Habe es mit "clear:both" versucht da ich dachte das es wohl an den eingesetzten float eigenschaften liegen muß. Half aber bislang nicht. Vielleicht weiß jemand rat.
Hier mein eingetztes stylesheet:
Und hier der link zu der Page

#content{
background-color:green;
width:750px;
height:372px;
}

#navi {
margin-top:115px;
margin-left:0px;
height:130px;
width:195px;
float:left;
border:1px solid black;
}

#navi ul {
margin: 0;
padding-left: 65px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

* html #navi li {
margin: 0 0 11px 0;
}

#navi li {
margin: 0 0 19px 0;
}

#navi li a {
display: block;
padding: 0px 0px 0px 0px;
width: 40px;
color:white;
}
#clear {
clear:both;
}

#include {
margin-right:0px;
margin-top:0px;
border:1px solid red;
width:300px;
height:250px;
float:right;
}

<div id="content">
  <div id="navi">
    <ul>
      <li><a id="link1" href="#" ><span>LINK1</span></a></li>
      <li><a id="link2" href="#" ><span>LINK2</span></a></li>
      <li><a id="link3" href="#" ><span>LINK3</span></a></li>
      <li><a id="link4" href="#" ><span>LINK4</span></a></li>
    </ul>
  </div>
  <div id="clear"></div>
  <div id="include"> </div>
</div>

Danke und Gruß
emonem

 

[Maik]

Bestimme mal den entsprechenden margin-top-Wert für die Box:

#include {
margin-right:0px;
margin-top:60px; /* (372px - 252px) / 2 */
border:1px solid red;
width:300px;
height:250px;
float:right;
}

und notiere das DIV #clear nach dem DIV #include:

<div id="content">
  <div id="navi">
    <ul>
      <li><a id="link1" href="#" ><span>LINK1</span></a></li>
      <li><a id="link2" href="#" ><span>LINK2</span></a></li>
      <li><a id="link3" href="#" ><span>LINK3</span></a></li>
      <li><a id="link4" href="#" ><span>LINK4</span></a></li>
    </ul>
  </div>
  <div id="include"> </div>
  <div id="clear"></div>
</div>

 

[emonem]

Dankeschön.