Div verschiebt sich dauernd automatisch! Was los?

FilleFlows · 30 Dezember 2013

Hey Leute.

Wenn ich 3 DIvs nebeneineander haben möchte, verschiebt sich immer der Rechte. Was soll ich tun?

Hier habe ich 3 Div's neben einander. Das erste Kästchen mit einem T, dann der 2te Div mit dem Text und dann noch der 3te. der 3te wird jetzt aber immer so nach unten verschoben.

Style:

HTML:

<html>
   
    <head>
        <style type="text/css">
            body{
                margin: 0 auto;
                padding: 0;
                background-color: black;
                font-family: arial;
                width: 100%;
            }
           
                #title{
                    color: red;
                    text-align: center;
                    width: 100%;
                    height: auto;
                    margin-top: 18px;
                    font-size: 13pt;
                    font-size: 12pt;
                   
                }
           
                #main{
                    width: auto;
                    color: white;
                }
               
                #left-content{
                    width: 4%;
                    height: auto;
                    float: left;
                    margin-top: 20%;
                    font-size: 12pt;
                    color: red;
                }
                   
                    #left-content p{
                       
                        -moz-transform:rotate(-90deg); /* Firefox 3.6 Firefox 4 */
                        -webkit-transform:rotate(-90deg); /* Safari */
                        -o-transform:rotate(-90deg); /* Opera */
                        -ms-transform:rotate(-90deg); /* IE9 */
                        transform:rotate(-90deg); /* W3C */
                    }
               
                #content{
                    width: 85%;
                    height: 85%;
                    margin-top: 20px;
                    background-color: green;
                    float: left;
                    margin-left: 4%; 
                }
                    #left-site{
                        width: 20%;
                        background-color: red;
                        float: left;
                    }
                    #center-site{
                        margin-left: 20%;
                        margin-right: 20%;
                        padding: 20px;
                        background-color: red;
                    }#right-site{
                        width: 17%;
                        background-color: red;
                        float: right;
                        top: 0px;
                    }
               
               
                #right-content{
                    width: 4%;
                    height: auto;
                    float: right;
                    margin-top: 24%;
                    font-size: 12pt;
                    color: red;
                }
               
                    #right-content p{
                        -moz-transform:rotate(90deg); /* Firefox 3.6 Firefox 4 */
                        -webkit-transform:rotate(90deg); /* Safari */
                        -o-transform:rotate(90deg); /* Opera */
                        -ms-transform:rotate(90deg); /* IE9 */
                        transform:rotate(90deg); /* W3C */
                    }
        </style>
    </head>
   
    <body>
        <div id="title">Titel</div>
       
        <div id="main">
            <div id="left-content"><p>Test</p></div>
            <div id="content">
                <div id="left-site">T</div>
                <div id="center-site">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
                <div id="right-site">T</div>
            </div>
            <div id="right-content"><p>Test</p></div>
        </div>
           
    </body>
   
</html>

Ich wäre euch sehr dankbar wenn ihr mir helfen könntet.
mfg

bdt600 · 30 Dezember 2013

HTML:

<html>
<head>
  <style type="text/css">
   body{
    margin: 0 auto;
    padding: 0;
    background-color: black;
    font-family: arial;
    width: 100%;
   }

    #title{
     color: red;
     text-align: center;
     width: 100%;
     height: auto;
     margin-top: 18px;
     font-size: 12pt;

    }
    #main{
     width: auto;
     color: white;
    }

    #left-content{
     width: 4%;
     height: auto;
     float: left;
     margin-top: 20%;
     font-size: 12pt;
     color: red;
    }

     #left-content p{
      -moz-transform:rotate(-90deg); /* Firefox 3.6 Firefox 4 */
      -webkit-transform:rotate(-90deg); /* Safari */
      -o-transform:rotate(-90deg); /* Opera */
      -ms-transform:rotate(-90deg); /* IE9 */
      transform:rotate(-90deg); /* W3C */
     }

    #content{
     width: 85%;
     height: 85%;
     margin-top: 20px;
     background-color: green;
     float: left;
     margin-left: 4%;
    }

    #left-site{
      width: 20%;
      background-color: red;
      float: left;
     }

     #center-site{
      width: 60%;
      float:left;
      background-color: red;
     }

     #right-site{
      width: 20%;
      background-color: red;
      float: right;
     }


    #right-content{
     width: 4%;
     height: auto;
     float: right;
     margin-top: 24%;
     font-size: 12pt;
     color: red;
    }

     #right-content p{
      -moz-transform:rotate(90deg); /* Firefox 3.6 Firefox 4 */
      -webkit-transform:rotate(90deg); /* Safari */
      -o-transform:rotate(90deg); /* Opera */
      -ms-transform:rotate(90deg); /* IE9 */
      transform:rotate(90deg); /* W3C */
     }
  </style>
</head>
<body>
  <div id="title">Titel</div>
  <div id="main">
   <div id="left-content"><p>Test</p></div>
   <div id="content">
    <div id="left-site">T</div>
    <div id="center-site">
       <p style="padding:20px;">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
        sea takimata sanctus est Lorem ipsum dolor sit amet.
       </p>
      </div>
    <div id="right-site">T</div>
   </div>
   <div id="right-content"><p>Test</p></div>
  </div>
</body>
</html>

Elroy · 31 Dezember 2013

Hallo.

Dein HTML Code ist falsch aufgebaut.
Erst left-site, dann right-site und danach center-site.

Gruss
Elroy

Div verschiebt sich dauernd automatisch! Was los?

FilleFlows

Neues Mitglied

bdt600

Guest

Elroy

Senior HTML'ler

Neueste Beiträge