Zwei DIVs nebeneinander positionieren

L

LightModulator

Aktives Mitglied
Thread Starter
Dabei seit
15.12.2008
Beiträge
149
Reaktionspunkte
0
Hallo,
ich will in meinem Header zwei DIVs nebeneinander platzieren. Empfiehlt es sich das mit einer absoluten Positionierung zu realisieren? Oder sollte man hier besser mit einer Tabelle arbeiten? Zum besseren Verständnis:


PHP: 
<body>
<div id="header">
<div id="left"><h4>Logo</h4></div>
<div id="right"><div id="menu"></div></div>
</div>
...
</body>


PHP: 
#header {heigh:150px;float:left;border-bottom:0px;}
#left {width:215px;position:absolute;top:27px;left:100px;height:150px;border:0px;}
#right {width:765px;position:absolute;top:27px;left:315px;height:150px;border:0px;}
 
Tabelle = Jehowa

Gollum würde sagen: Nein, nicht mit Tabelle. Tabellen sind böse, ganz böse, mein Schatz!

petjek
 
Es gibt auch horizontale Listen. Falls es ein Menü werden soll, könnte das auch geeignet sein.
 
Es soll im linken DIV ein Logo platziert werden und im rechten das Menü. Ich bin unsicher ob ich bei der absoluten Positionierung der zwei DIVs überhaupt das Header DIV benötige?
 
Was hindert dich daran einfach "float: left" und "float: right" zu benutzen? Mache ich auch immer.
 
MrMaker schrieb:
Was hindert dich daran einfach "float: left" und "float: right" zu benutzen? Mache ich auch immer.
Zum Vergrößern anklicken....

und wie verhindere ich, die Verschiebung des rechten DIVs bei einer Seitenverkleinerung?
 
Ich weiß nicht genau was du damit meinst, du benutzt doch feste Größen. Meinst du bei Verkleinerung des Browserfensters?
 
MrMaker schrieb:
Ich weiß nicht genau was du damit meinst, du benutzt doch feste Größen. Meinst du bei Verkleinerung des Browserfensters?
Zum Vergrößern anklicken....
Genau wenn ich das Browserfenster verkleinere und somit die definierte Größe des Headers unterschreite wird das rechte DIV unter das linke DIV verschoben. Müsste man zusätzlich beim floaten clear definieren?
 
versuch einfach mal bei beiden im css: display:inline oder display:inline-block
 
und wenn du das unterschreiten verhindern willst machst du im header-css: white-space:nowrap;
 
Hier mal mein CSS (#left und #right sind im #header):
Code: 
#header {heigh:150px;float:left;position:absolute; top:27px; left:100px; border-bottom:0px;}
#left {width:215px;float:left; display:inline-block; white-space:nowrap; height:150px;border:0px;}
#right {width:765px;float:right; display:inline-block; white-space:nowrap; height:150px;border:0px;}
 
Du musste dem Header entweder eine feste Größe zuordnen oder aber left und right %-Werte.

Also entweder:
#header { width: 980px; }

#leftheader {
float: left;
width: 215px;
}

#rightheader {
float: right;
width: 765px;
}
Zum Vergrößern anklicken....
Code: 
<div id="header">
<div id="leftheader">
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. 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="rightheader">
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.
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>

oder

#header { width: 100%; }

#leftheader {
float: left;
width: 20%;
}

#rightheader {
float: right;
width: 80%;
}
Zum Vergrößern anklicken....
Code: 
<div id="header">
<div id="leftheader">
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. 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="rightheader">
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.
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>
 
iFlip schrieb:
Wie macht man das, wenn man mehr als zwei Bereiche/DIVs hat und diese nebeneinander anordnen will?
Zum Vergrößern anklicken....

Dann kannst Du z.B. allen ein float:left geben:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Floats</title>
    <style type="text/css" media="screen">
        .header { 
            width: 900px;
        }
        .box {
            width: 200px;
            float: left;
            border:1px solid #000;
            background-color:#ccc;
            padding:2px;
            margin:2px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua.
        </div>
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua.
        </div>
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua.
        </div>
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua.
        </div>
    </div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten