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

3divs nebeneinander

B

bengaltiger

Neues Mitglied
hallo

ich möchte 3divs nebeneinander stellen, hab gegoogelt aber hab trotzdem ein problem

so sieht der code aus

Code: 
<div id="main">
        <aside id="asideleft">1
        </aside>
        <section id="maincontent">2
        </section>
        <aside id="asideright">
        </aside>
    </div>
Code: 
#main{
    width:100%;
    height:100%;
}
#maincontent{
    width:60%;
    float:left;
    background:#99FF00;
}
#asideleft{
    width:20%;
    float:left;
    background:#99FF66;
}
#asideright{
    width:20%;
    float:right;
    background:#99FF66;
}

der rechte div ist bisschen nach unten plaziert...


danke im voraus
 
Stell mal bitte deinen kompletten HTML-Code hier rein. Am besten aus dem Browser herauskopieren wo das Problem auftaucht. Teile auch mit, mit welchem Browser und Betriebssystem du testet. So ist das alles im Moment zu vage. Ebenso den Kompletten CSS-Code falls ausgelagert.
 
mozilla firefox 4
windows7^^

hier der vollständige code

Code: 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html{
    height:100%;
}
body{
    height:100%;
    margin:0px;
}
#navbar {  
    width: 100%;  
    height: 35px; 
    background-color:#8bfc3a;
    box-shadow: 0px 0px 22px rgba(86,199,10,1);
    -moz-box-shadow: 0px 0x 22px rgba(86,199,10,1);
    -webkit-box-shadow: 0px 0px 22px rgba(86,199,10,1);
}
#navtitel{
    float:left;
    margin-top:5px;
    margin-left:25px;
    font-size:20px;
    font-weight:bold;
    color:#FFFFFF;
}
#navlogin {   
    float:right;
    margin-top:4px;
}
#triangle1 {
    float:right;
    margin-top:14px;
    margin-right:1%;
    border-width: 6px;
    border-style: solid;
    border-color: rgb(54,117,9) transparent transparent transparent;
    height:1px;
    width:1px;
    display:inline-block;
}
#triangle2 {
    float:right;
    margin-top:7px;
    margin-right:1%;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgb(54,117,9) transparent;
    height:1px;
    width:1px;
    display:inline-block;
}
#navtogglebar{
    visibility: hidden;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    -o-transition: height 0.4s;
    transition: height 0.4s;
    height: 0;
    width: 100%;  
    background-color:#8bfc3a;
    box-shadow: 0px 6px 8px rgba(86,199,10,0.5);
    -moz-box-shadow: 0px 6x 8px rgba(86,199,10,0.5);
    -webkit-box-shadow: 0px 6px 8px rgba(86,199,10,0.5);
}
#navtoggleitem{
    visibility:hidden;
    -webkit-transition: 0s linear 0.4s;
    -moz-transition:  0s linear 0.4s;
    -o-transition: 0s linear 0.4s;
    transition:  0s linear 0.4s;
    float:right;
    margin-right:7.25em;
    margin-top:-6px;
    font-size:12px;
}
#navtoggleitem a{
    margin-left:2.5em;
}
#navtoggleitem2{
    visibility:hidden;
    float:right;
    margin-top:-6px;
    font-size:13px;
}
#main{
    width:100%;
    height:100%;
}
#maincontent{
    width:60%;
    float:left;
    background:#99FF00;
}
#asideleft{
    width:20%;
    float:left;
    background:#99FF66;
}
#asideright{
    width:20%;
    float:right;
    background:#99FF66;
}
</style>
</head>

<body>
<div id="navbar">
<div id="navtitel">
SocialCube
</div>
<div id="navlogin">
<form action="/index.php?navbar=navlogin" method="post">
<input name="navusername" type="text" placeholder="Username" />
<input name="navpassword" type="password" placeholder="Password"/>
<input name="go_navlogin" type="submit" value="GO"/>
</form>
</div>
<div id="triangle1" onClick="toggle(this.id);"></div>
</div>
<div id="navtogglebar">
<div id="navtoggleitem2">
<form>
<input type="checkbox" />
<label>Angemeldet bleiben</label>
<a href="#">Passwort vergessen?</a>
</form>
</div>
</div>
<div id="main">
        <aside id="asideleft">1
        </aside>
        <section id="maincontent">2
        </section>
        <aside id="asideright">3
        </aside>
    </div>
</body>
</html>

hab gemerkt wenn ich diesen teil entferne klappt es aufeinmal
Code: 
<div id="navtogglebar"> 
<div id="navtoggleitem2"> 
<form> 
<input type="checkbox" /> 
<label>Angemeldet bleiben</label> 
<a href="#">Passwort vergessen?</a>
 </form> 
</div>

warum aber???
 
Aktuelle Firefox-Version ist 7.0.1, würde ich mal updaten, dies aber nur am Rande.

Wenn du im CSS
HTML: 
#main{     width:100%;     height:100%; }
durch
HTML: 
#main{     width:100%;     height:100%;
    clear:both; }
ersetzt funktionierst.

Du hast oberhalb des Elementes Div Main das Div Maintoggelitem, welches du mit float nach rechts schiebst. Wenn du die hidden-Attribute mal testweise rausnimmst, siehst du es.
Durch dieses Float wird alles was danach kommt links herum angeordnet, sofern Platz dafür vorhanden ist.
Für die beiden Elemente aside id="asideleft" und section id="maincontent" reicht der Platz noch aber eben nicht mehr für aside id="asideright".
Das letzte Element wird dann eben danach angeordnet, dort wo gerade Platz ist.

Mit dem Attribut Clear:both gehst du wieder aus dem Fluss heraus und die Blockelemente verhalten sich wieder wie gewünscht.
Ist übrigens ein häufiger Fehler bei der Verwendung von Float.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben