• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 divs neben einander

N

nicename

Neues Mitglied
Halli Hallo,
Ich habe mich wieder in meiner Unordnung verknotet.
So ich möchte gerne rechts und links meiner div Container jeweils einen weiteren Div hinzufügen.
Jedoch gelingt mit dies nicht weil diese entweder über meiner div Container landen oder da drunter.
Irgendwas muss ich falsch gemacht haben und deswegen bitte euch um Rat.
Ich habe es mit float right und left versuch doch es hat nichts gebracht.
Hier mein Quellcode:
HTML: 
                  <div class="header">
                                    HIER SOLL MEIN DIV HIN 
                                  <div class="menu">
                                        
                                       <ul>
                                            <li class="Home">
                                                   <a href="#">    <p>Home</p></a>
                                                    <p class="subtext">IN THE HOUSE</p>
                                            </li>
                                            <li class="Gallery">
                                                   <a href="#"> <p>Gallery</p></a>
                                                        <p class="subtext">Photos</p>
                                            </li>
                                            <li class="Events">
                                                        <a href="#"><p>Events</p></a>
                                                        <p class="subtext">Get in touch</p>
                                            </li>
                                            <li class="Gästebuch">
                                                        <a href="#"><p>Gästebuch</p></a>
                                                        <p class="subtext">Send us your stuff!</p>
                                            </li>
                                            <li class="Remix">
                                                        <a href="#"><p>Remix's</p></a>
                                                        <p class="subtext">Legal things</p>
                                            </li>
                                            <li class="Videos">
                                                        <a href="#"><p>Videos</p></a>
                                                        <p class="subtext">Send us your stuff!</p>
                                            </li>
                                            <li class="Kontankt">
                                                        <a href="#"><p>Kontankt</p></a>
                                                        <p class="subtext">Legal things</p>
                                            </li>
                                        </ul>
                                       
                                    </div> UND HIER SOLL DER NÄCHSTE HIN
                 </div>
css:
HTML: 
.menu {
    width:950; <- KANN WEG
    position:absolute; <- MUSS SO BLEIBEN
    margin: 5px 0px 0px -25px;
    z-index:10;
    text-align:center;
    left:150px;
    }
 
Du kannst neben ein absolut positioniertes Element kein anderes Element setzen. Absolut Positionierte Elemente sind aus dem Fluss genommen.

Die Lösung wäre genau das was Du nicht machen willst: auf absolute Positionierung verzichten.
Alternative: die absolute Positionierung nicht beim Menü sondern bei einem neu einzufügenden Element ergänzen. In diesem Element das Menü unterbringen und floaten. Die anderen Elemente dann daneben setzen (auch innerhalb des neuen Elements) und ebenfalls floaten.

Hinweis: ich habe dein Topic gleich mal zu CSS verschoben, weil diese Gestaltung nichts mit HTML zu tun hat.
 
versuchs mal so:

HTML: 
<style type="text/css">
div.box {
background-color: blue;
width: 300px;
height: 300px;
}

div.left {
background-color: red;
width: 20%;
height: 200px;
foat: left;
}

div.center {
background-color: blue;
width: 60%;
height: 300px;
}

div.right {
background-color: red;
width: 20%;
height: 300px;
float: right;
</style>

<div class="box">
<div class="left"></div>
<div class="center"></div>
<dic class="right"></div>
</div>

Hoffe ich konnte dir helfen
 
Hallo,
ich bedanke mich erst mal sehr herzlich für eure netten und schnellen antworten.
Ich kann leider nicht auf absolute verzichten, das Problem ist das mein Menü durch Java Bilder ausfährt wenn ich es nicht auf absolute setze dann verschiebt er alles was da drunter ist.
Dank Lorens und habe ich es jetzt geschafft dass sie neben einander sind, jedoch kann ich sie jetzt nicht zentrieren. Jedes Mal wenn ich zu menu1 width hinzufüge teilt sich mein menu2 auf und verschiebt einteil von sich nach unten.
mein code:
HTML: 
.menu {
    width:950px;
    position:absolute;
    margin: 5px 0px 0px -25px;
    z-index:10;
    text-align:center;
    max-height:50px;
    
    }
.menu1 {

    float:left;
}
.menu2 {width:750px;
float:none;
}
.menu3 {
    float:right;
    min-width:125px;
    max-width:125px;
}


<div class="menu">
                                        <div class="menu1">asd</div>
                                   <div class="menu2">
                                       <ul> <!--<marquee class="nummer" > <font color="#FF0000">Dj</font> Awessta: 0176 XXXX XXX</marquee> -->
                                            <li class="Home">
                                                   <a href="#">    <p>Home</p></a>
                                                    <p class="subtext">IN THE HOUSE</p>
                                            </li>
                                            <li class="Gallery">
                                                   <a href="#"> <p>Gallery</p></a>
                                                        <p class="subtext">Photos</p>
                                            </li>
                                            <li class="Events">
                                                        <a href="#"><p>Events</p></a>
                                                        <p class="subtext">Get in touch</p>
                                            </li>
                                            <li class="Gästebuch">
                                                        <a href="#"><p>Gästebuch</p></a>
                                                        <p class="subtext">Send us your stuff!</p>
                                            </li>
                                            <li class="Remix">
                                                        <a href="#"><p>Remix's</p></a>
                                                        <p class="subtext">Legal things</p>
                                            </li>
                                            <li class="Videos">
                                                        <a href="#"><p>Videos</p></a>
                                                        <p class="subtext">Send us your stuff!</p>
                                            </li>
                                            <li class="Kontankt">
                                                        <a href="#"><p>Kontankt</p></a>
                                                        <p class="subtext">Legal things</p>
                                            </li>
                                        </ul>
                                       </div>
                                       <div class="menu3">asd
                                       </div>
                                    </div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben