div-Container ausrichten

[Mario348]

Ich möchte einen div container positionieren, der im Anhang rot im rechten grauen Balken dargestellt wird.

Ich weiss aber nicht, wie der Abstand zur Navigation und zum linken Bildschirmrand sein muss, könnt ihr mir da helfen?

der css Code sieht folgendermassen aus:

#button {
    position:absolute;
    left:50%;
    top:50%;
    width: 100px;
    height: 100px;
    margin-left:?px;
    margin-top:?px;
}

 

[prm]

Auf absolute Positionierungen solltest du in diesem Zusammenhang verzichten.

Ich würde entweder ein zwei- oder dreispaltiges Grundlayout nehmen und dann das gewünschte Element in der entsprechenden Spalte platzieren.
Siehe z.B. Dreispaltiges Layout, zentriert mit fixen Breiten

 

[Mario348]

So weit ich das sehe, habe ich einfach einen grauen Container erstellt und da drin wieder einen Container erstellt, welcher zentriert ist.

Könnt Ihr bitte beim umstellen auf das 3 Spalten Modell helfen?
3 Spalten deshalb, wei ich dann im rechten Container auch noch Dinge platzieren möchte.

Hier mal mein css Code:

body {
color: #FFFFFF;
font-weight: bold;
background-color: #444444;
font-family: Arial, Helvetica, Sans-Serif;
text-align: left;
object-align: center;
}

h1 {color: #F57900, font-size: 16px, margin-top: 10px;}

p {margin-top:15px; margin-bottom:15px;}

a {
text-decoration: underline;
color: #F57900;
}    

a:visited {
text-decoration: underline;
color: yellow;
}   

a:hover {
text-decoration: underline;
color: red;
}

a:active {
text-decoration: none;
color: red;
}

* {
scrollbar-base-color:#F57900;
scrollbar-arrow-color:black;
scrollbar-shadow-color: black; 
}

#oben
 {      
    width:                 1280px;
    height:             262px;
    background-repeat:          no-repeat;
}



#content
 {
    clear:                both;
    width:                  739px;
      float:                left;
        vertical-align:            left;
        margin:                         0px 0px 243.5px 243.5px;
    padding:            10px;
        background-color:        #2E3436;


}



* html #content {
    padding:0;
    height:95%;
    overflow:auto;
}



* html, * html body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    
}



p, h1, h2, h3 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
background: transparent;
} 



* {
padding:0;
margin:0;
}



#footer {
position: fixed;
bottom: 0;
width: 100%;
margin: -7.5em 243.5px 0 243.5px;
line-height: 1.5em;
text-align: center;
background: #111111;
} 


* html #footer
    {
        margin-top: -7.5em;
    }


#navigation {

    margin:0;
    padding:0;
    position:fixed;
    width:193px;
    height:1280px;

}


#inhalt {
    position:absolute;
    width:592px;
    height:1280px;

}

eset1, eset2, eset3 {

clear: both;
margin: 50px 243px 50px 243px;
background: transparent;

}

.p1 { border:2px solid #F57900;
      margin-bottom:30px;
      margin-right:50px;
      padding:6px;
      font-size:12pt;
         

      }



.font-big {
font-family: Verdana, sans-serif;
font-size:16px; font-weight:bold;
color:#000000;
}
.font-small {
font-family: Verdana, sans-serif;
font-size:10px; font-weight:normal;
color:#000000;
}
.table {
background-color:#000000;
width:50%;
}
.head {
background-color:#FFA500;
}
.main {
background-color:#919191;
font-family: Verdana, sans-serif;
font-size:12px; font-weight:normal;
color:#000000;
}
.foot {
background-color:#FFA500;
}
.align {
text-align:left;
}
.textarea {
background-color:#FFFFFF;
color:#000000;
font-family : Verdana, Helvetica, sans-serif;
font-size: 12px;
border : 1px solid #808080;
}
.input {
background-color:#FFFFFF;
color:#000000;
font-family : Verdana, Helvetica, sans-serif;
border : 1px solid #808080;
font-size: 12px;
}
.select {
background-color:#FFFFFF;
color:#000000;
font-family : Verdana, Helvetica, sans-serif;
font-size: 12px;
}
.button {
width : 130px;
}

#button {
    position:absolute;
    left:50%;
    top:50%;
    width: 100px;
    height: 100px;
    margin-left:113px;
    margin-top:322px;
}