2 Divs in div nebeneinander
0 0 
Jonathan
0
2 Divs in div nebeneinander
Hallo zusammen,
ich komme mit CSS generell nicht so gut klar irgendwie. Finde es immernoch viel einfacher mit Tabellen zu designen, aber ich sehe die Gründe, weshalb es per CSS doch besser ist schon ein, deshalb versuche ich es.
Aber ich komme nicht weiter.
Ich habe einen Div Container, dieser heißt "navi". In diesem Div-Container sollen von ganz links zur Mitte 4 Textlinks rein. Gleichzeitig soll aber ganz rechts auch ein Text stehen. Und die Texte sollen, vertikal gesehen, links stehen.
In etwas so:
-------------------------------------------------
| Link1 Link2 Link3 Hallo Text |
-------------------------------------------------
Bisher habe ich das immer so gelöst, dass ich eine Tabelle mit selber Höhe wie den Div-Container erstellt habe, da dann <td valign="middle" align="left"></td> und <td valign="middle" align="right"> geschrieben habe und dann hat das gepasst.
Ohne Tabelle kriege ich es nicht hin. Habe es so probiert:
<div id="Container1">
<div id="Links">blablabla</div>
<div id="Rechts">blablabla</div>
</div>
Im Stylesheet:
#Container1 {
width:390px;
height:60px;
}
#Links {
float:left;
width:300px;
height:60px;
text-align:left;
}
#Rechts {
float:right;
width:85px;
height:60px;
text-align:right;
}
Da ist es dann aber so, dass der Text rechts ist, aber irgendwie unter dem anderen und nicht auf gleicher Höhe.
Kann mir da jemand helfen???
-
Hi,
hast Du mal versucht das float:right wegzulassen? Wenn Du einem element sagst, dass es sich links halten soll, ister der folgende Kram logischerweise rechts.
Interessehalber: Welchen Doctype nutzt du?
-
Hallo,
Da ist es dann aber so, dass der Text rechts ist, aber irgendwie unter dem anderen und nicht auf gleicher Höhe.
Wenn ich mir dein Beispiel zusammenbaue sind beide Texte auf der gleichen Höhe. Es muss an was anderem liegen.
Jonathan
-
So, ich habe es jetzt halb geschaft, indem ich per Margin das eingestellt habe. Habe mal den Code rauskopiert, denn dieser wird nur im Firefox korrekt angezeigt, beim IE verschiebt sich die Textbox irgendwie nach unten:
CSS:
#navi {
margin-top:0;
width:735px;
height:59px;
background-color:#000;
}#links {
width:535px;
float:left;
margin: 12px 0px 0px 12px;
font-family: 'Trebuchet MS', Lucida Grande, Verdana, Sans-Serif;
font-size: 14px;
line-height: 1.5;
color:#fff;
text-align:left;
}#rechts {
width:176px;
float:right;
text-align:right;
margin: 12px 12px 0px 0px;
}im HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" sel:lang="de" lang="de"><head><title>test seite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<div id="navi">
<div id="links">
<a href="?site=1" class="aktiv">link1</a> / <a href="?site=2">link2</a> / <a href="?site=3">link3</a> / <a href="?site=4">link4</a>
</div>
<div id="rechts">
<input type="text" name="Text">
</div></div>
</body></html>
Jemand eine Ahnung, woran das liegen mag? Im Firefox ist es jetzt so dargestellt, wie ich will. Die Textbox ist auf gleicher Höhe wie die Links nur ganz rechts. Im IE funktioniert gar nix.:(
-
Hi!
#links {
width:535px;
float:left;
margin: 12px 0px 0px 12px;
font-family: 'Trebuchet MS', Lucida Grande, Verdana, Sans-Serif;
font-size: 14px;
line-height: 1.5;
color:#fff;
text-align:left;display:inline;
}
Und die Sache sollte sich erledigt haben.
schaust Du hier. Is nur ein paar Threads weiter unten.
-