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

Frage div mit width=auto vergrößert sich mit anderem div?

Willibergi

Mitglied
Hej,
ich habe 3 divs und möchte, dass die ersten zwei divs genauso lang sind, wie der Text in ihnen.
(natürlich noch ein bisschen padding links und rechts)
Der erste div klappt genauso, wie ich möchte. Der zweite aber, der auch mit width="auto" festgelegt ist, wächst aber mit dem dritten div, der sich unter ihnen befindet. Bild und Quelltext anbei.
loips.PNG
Wie man sehen kann, vergrößert sich der dunkelgrüne div mit dem, der unter ihm liegt (in weiß).
Quellcode als Bild, weil sonst die Formatierung flöten geht:
qc.PNG
Ich hoffe, ihr könnt mir helfen.
LG Willibergi
 
Werbung:
Hallo

Quellcode als Bild ist Sch....rott. Die Formatierung ist unnötig. Andere bevorzugen andere Formatierungen und sind durch deine eher genervt.

Auf die schnelle fällt mir folgendes auf:

Der Doctype fehlt

Auf einer Seite dürfen ID nur einmal vorkommen.

div#main wird nicht geschlossen.

Auf Höhenangaben (height) sollte verzichtet werden. Die Höhe von Containern wird durch ihren Inhalt bestimmt.

Zu deinem Problem: Probier es mal ohne margin:auto und verwende display:inline-block.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Vielen Dank - das funktioniert!
Aber wenn ich jetzt dem ersten div die Klasse inactive gebe und dem zweiten die Klasse active, wird der zweite vor dem ersten angezeigt. Warum?
Hier der Quellcode:
<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum</title>
<style>
#main{
width: auto;
height: auto;
float: left;
}
.inactive{
width: auto;
background: #003800;
color: white;
padding: 10px;
display: inline-block;
}
.active{
width: auto;
background: green;
color: white;
float: left;
padding: 10px;
}
#tabmain{
width: 500px;
height: auto;
background: white;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<div id="main">
<div class="inactive">Lorem</div><div class="active">ipsum</div>
<div id="tabmain">Lorem ipsum dolor sit amet</div>
</div>
</body>
</html>

und hier mein Ergebnis:
bld.PNG
Ich hoffe, man kann erkennen, was ich meine - liegt das an den Änderungen des Quellcodes?
 
Werbung:
Zurück
Oben