2 Div Boxen neben einander

M

mahaju

Mahaju.de
ID: 218702
L
24 Juni 2006
492
17
Also ich habe das problem, dass ich zwei Div boxen neben einander haben will. Wenn ich aber float: left; benutze, kann ich die Div elemente dann nicht mehr Zentrieren, und wenn ich float: auto; eingebe wird das nicht mehr Zentriert sondern wieder übereinander.
Gibt es da eine andere Möglichkeit?

Und, wenn ich padding: 10px; eingebe kommt das spiegelt die div box immer die 10px auf der anderen seite wieder...

Die Div Boxen stelle ich doch mit margin: auto; in die mitte oder?

Danke im Vorraus ;)

MfG
Maurice
 
Bei DIVS wäre es nicht schlecht, wenn du feste Größen nimmst. z.b. width: 50%.
Dann ahst du weniger Padding, Umbruch Probleme....

<div style="float:left; width: 50%;text-align:center">
Inhalt zentriert #1
</div>
<div style="float:left; width: 50%;text-align:center">
Inhalt Zentriert #2
</div>

<div style="clear:both">
</div>
 
NagathoR schrieb:
Bei DIVS wäre es nicht schlecht, wenn du feste Größen nimmst. z.b. width: 50%.
Dann ahst du weniger Padding, Umbruch Probleme....

<div style="float:left; width: 50%;text-align:center">
Inhalt zentriert #1
</div>
<div style="float:left; width: 50%;text-align:center">
Inhalt Zentriert #2
</div>

<div style="clear:both">
</div>
Zum Vergrößern anklicken....

ja aber ich habe ja bilder als hintergund, und die sollen ja alle richtig dargestellt werden. für was ist der befehl clear: both; ? text-align: center; funzt doch aber nur im IE oder?
 
mahaju schrieb:
ja aber ich habe ja bilder als hintergund, und die sollen ja alle richtig dargestellt werden. für was ist der befehl clear: both; ? text-align: center; funzt doch aber nur im IE oder?
Zum Vergrößern anklicken....
clear:both; sorgt dafür, dass der Textfluss danach normal weiter geht.
text-align:center; funktioniert in allen Browsern, nicht nur im IE!

BTW: Ich verstehe nicht so ganz, was du möchtest. Stell mal nen Beispiel online oder so ;)
 
flaschenkind schrieb:
clear:both; sorgt dafür, dass der Textfluss danach normal weiter geht.
text-align:center; funktioniert in allen Browsern, nicht nur im IE!

BTW: Ich verstehe nicht so ganz, was du möchtest. Stell mal nen Beispiel online oder so ;)
Zum Vergrößern anklicken....
Edit: Wer ist eig. BTW?

ah...

also ich habe:

#logo {
width: 356px;
height: 81px;
background-image: url(img/logo.gif);
border: 0px;
}

#navi {
width: 622px;
height: 81px;
background-image: url(img/navi.gif);
border: 0px;
}

diese boxen will ich neben einander stellen, das habe ich mit float: left; gemacht...
 
mahaju schrieb:
Edit: Wer ist eig. BTW?
Zum Vergrößern anklicken....

btw. => ByTheWay

mahaju schrieb:
#logo {
width: 356px;
height: 81px;
background-image: url(img/logo.gif);
border: 0px;
}

#navi {
width: 622px;
height: 81px;
background-image: url(img/navi.gif);
border: 0px;
}
Zum Vergrößern anklicken....

dann solltest du auch float: left; da einbauen...;)

also machst du:
Code: 
 #logo {
     width: 356px;
     height: 81px;
     background-image: url(img/logo.gif);
     border: 0px;
    float: left;
     }
     
 #navi {
     width: 622px;
     height: 81px;
     background-image: url(img/navi.gif);
     border: 0px;
    float: left;
     }

und dann schaut dein HTML Code so aus:

HTML: 
<div id="logo"></div>
<div id="navi"></div>
<div style="clear: both;"></div>
 
CrazySash schrieb:
btw. => ByTheWay



dann solltest du auch float: left; da einbauen...;)

also machst du:
Code: 
 #logo {
     width: 356px;
     height: 81px;
     background-image: url(img/logo.gif);
     border: 0px;
    float: left;
     }
     
 #navi {
     width: 622px;
     height: 81px;
     background-image: url(img/navi.gif);
     border: 0px;
    float: left;
     }

und dann schaut dein HTML Code so aus:

HTML: 
<div id="logo"></div>
<div id="navi"></div>
<div style="clear: both;"></div>
Zum Vergrößern anklicken....

Ja, aber wie bekomme ich die mit dem float: left; nun in die mitte?
 
Nen Tipp:
<div> Boxen sind vom Display Typ block. Kurz gesagt, nach ihnen kommt ein Zeilenumbruch.
Wenn du nun einfach ihnen den Display Typ inline gibst, ist der Zeilenumbruch weg und die <div> Box wird einfach im Textverlauf eingebunden.

Wenn du es trotzdem mit Float machen willst und es zentriert haben willst, versuche folgendes:

HTML: 
<div style="text-align:center;width:100%;">
  <div class="left">Linke Box</div><div class="right">Rechte Box</div>
  <div style="clear: both;"></div>
</div>

Nun musst du den Klassen left/right noch text-align:left; zuordnen, denn Standard ist es inherit, also es wird vom oberen Element vererbt.



Ich hoffe ich konnte dir ein wenig helfen.
 
chrissel schrieb:
Nen Tipp:
<div> Boxen sind vom Display Typ block. Kurz gesagt, nach ihnen kommt ein Zeilenumbruch.
Wenn du nun einfach ihnen den Display Typ inline gibst, ist der Zeilenumbruch weg und die <div> Box wird einfach im Textverlauf eingebunden.

Wenn du es trotzdem mit Float machen willst und es zentriert haben willst, versuche folgendes:

HTML: 
<div style="text-align:center;width:100%;">
  <div class="left">Linke Box</div><div class="right">Rechte Box</div>
  <div style="clear: both;"></div>
</div>

Nun musst du den Klassen left/right noch text-align:left; zuordnen, denn Standard ist es inherit, also es wird vom oberen Element vererbt.



Ich hoffe ich konnte dir ein wenig helfen.
Zum Vergrößern anklicken....

Ja ^^, aber ich will ja die Div Boxen Stylen, das heist, in der einen brauche ich Padding, und in beiden benötige ich ein hintergrund bild...

und ich habe bei padding das prob:

hier habe ich an einem alten design, welches ich noch etwas verändert habe, geübt:
https://imagesup.de/picture.php?code=gonwuj6ks35xt00hzcdq
und da ist immer so ein komischer fehler mit padding...

der code:

#header {
margin-top: 20px;
width: 607px;
height: 113px;
background-image: url(img/header.gif);
border: 0px;
}

#navhead {
width: 607px;
height: 12px;
background-image: url(img/navhead.gif);
border: 0px;
}

#navi {
width: 607px;
height: 18px;
background-image: url(img/navi.gif);
padding-left: 40px;
padding-right: 40px;
border: 0px;
}

#navfoot {
width: 607px;
height: 6px;
background-image: url(img/navfoot.gif);
border: 0px;
}
#content {
width: 607px;
height: 100px;
background-image: url(img/contentbg.gif);
padding: 5px;
border: 0px;
}
#footer {
width: 607px;
height: 28px;
background-image: url(img/footer.gif);
border: 0px;
}
 
chrissel schrieb:
Achso, sorry, hatte mir hier nicht alles durchgelesen da ich nicht viel Zeit habe heute.
Zum Vergrößern anklicken....

achso, weißt du das mit dem padding zufällig? und hast du eine andere idee?

Edit:

warscheinlich bin ich zu doof, aber irgendwie gehen die divs nicht in die mitte...

body {
background-color: #FFFFFF;
margin-top: 10px;
margin-left: 0px;
padding: 0px;
position: absolute;
font-family: Tahoma, Verdana;
font-size: 10px;
border: 0px;
text-align: center;
}

img {
border: none;
}

#header {
width: 978px;
height: 26px;
background-image: url('img/header.gif');
clear: both;
text-align: center;
border: 0px;
}

#logo {
position: absolute;
width: 356px;
height: 81px;
background-image: url('img/logo.gif');
text-align: center;
border: 0px;
}

#navi {
position: absolute;
left: 356px;
width: 622px;
height: 81px;
background-image: url('img/navi.gif');
text-align: center;
border: 0px;
}

#bg {
margin-top: 80px;
width: 976px;
height: 200px;
background-image: url('img/bg.gif');
clear: both;
padding: 10px;
text-align: center;
border: 0px;
}
#footer {
width: 976px;
height: 26px;
background-image: url('img/footer.gif');
clear: both;
text-align: center;
border: 0px;
}

EDIT:

Habe das Problem Gelöst... Danke...
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben