Relative DIV-Breite

Innocentus · #1 (**permalink**) 23.01.2011, 21:48

Ich möchte ein Icon vor einem DIV in einer Reihe platzieren.
Leider funktioniert das so einfach nicht, weder im Firefox noch im Internet Explorer ( 6 / 7 / 8 ).

Schon einmal vorweg: Die Seite ist noch offline und ich kann keinen Link bereitstellen.

Ich verwende das folgende HTML-Konstrukt:

HTML-Code:

[...]
<ul class="list">
[...]
<li><a href="/test2">
<img alt="Symbol" src="/img/static/test/icon.png" class="icon" />
<div class="stripe">
Text Text Text<br />
Text Text Text
</div>
</a></li>
[...]
</ul>
[...]

Code:

[...]
.icon {
float:left;
}

.stripe {
border:thin solid white;
background-image:url('/img/static/test/bcks.png');
background-repeat:repeat-x repeat-y;
float:right;
width:80%;
height:150px;
}
[...]

Leider bricht der DIV, wie oben aus der Skizze ersichtlich, um. Genau das aber möchte ich eben nicht.

Ich sollte zudem erwähnen, dass dieses Problem bereits in einem anderen Forum besprochen wurde:
http://www.phpforum.de/forum/showthread.php?p=1438655

Vielen Dank für eure Antworten im Voraus!
Mit freundlichen Grüßen
Innocentus

plastiko · #2 (**permalink**) 23.01.2011, 22:11

Aus deinem Schnipsel ist nicht ersichtlich wie breit .icon ist.
Zeige besser einen Link.

Div in a ist kein valides HTML.

Luziefer · #3 (**permalink**) 23.01.2011, 22:16

also bei mir gehts wenn ich dem ico eine feste breite gebe, dann bleibt alles in der oberen zeile.

Zitat:

.icon {
float:left;
width: 200px;
}

.stripe {
border:thin solid white;
background-image:url('/img/static/test/bcks.png');
background-repeat:repeat-x repeat-y;
float:right;
width:80%;
height:150px;
}

<body>
<div class="list"><a href="/test2"><img alt="Symbol" src="/img/static/test/icon.png" class="icon" /></a>
<div class="stripe">Text Text Text<br />Text Text Text
</div>
</div>

und das ganze ohne ul oder li

plastiko · #4 (**permalink**) 23.01.2011, 22:26

Das halte ich für Zufall.
Woher willst du wissen das .icon (width:200px) neben .stripe (width:80%) passen?

Innocentus · #5 (**permalink**) 23.01.2011, 23:01

Vielen Dank zunächst einmal für eure Antworten!

Wie kann ich jetzt vorgehen?
Sollte ich einen völlig anderen Lösungsansatz anstreben?
Ich habe jetzt alles mögliche mit Floating versucht, funktionieren tut es leider nicht.

Es wäre sehr nett, wenn ihr mir hierbei helfen könntet.
Mit freundlichen Grüßen
Innocentus

inta · #6 (**permalink**) 23.01.2011, 23:11

Lass .stripe nicht floaten, entferne die Breitenangabe und gib ihm einen entsprechenden Margin nach links.

Solange du nicht HTML5 einsetzt, ist dein Code allerdings immer noch nicht valide. Alternativ zu dem Div könntest du ein Span nehmen und es zum Blockelement machen.

jetwes · #7 (**permalink**) 25.01.2011, 16:55

wie inta richtig gesagt hat:

nimm das float: right; raus und benutze dafür ein margin-left: 20%;

also:

Code:

.stripe {
border:thin solid white;
background-image:url('/img/static/test/bcks.png');
background-repeat:repeat-x repeat-y;
margin-left: 20%;
width:80%;
height:150px;
}

Gruß
jetwes

Innocentus · #8 (**permalink**) 02.02.2011, 15:26

Vielen Dank, es hat funktioniert.

Mit freundlichen Grüßen
Innocentus

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Div horizotal zentriert, aber Breite variable(abhängig von inhalt)	dagod	CSS	3	28.04.2010 20:46
Div Positionen in Firefox falsch	ozero	CSS	4	17.07.2009 22:35
Was übersehe ich?	Psyclown	CSS	2	19.10.2008 13:00
Linkverhalten im IE6	ChOpSueY!	CSS	19	19.05.2008 22:48
Einen Div am unteren Rand des HTML ausrichten, immer über volle Breite	Dwarf	CSS	10	12.06.2007 17:19