nicht angemeldet
Divs neben einander mit "float" in NN7
Hallo,
ich habe ein Problem mit dem Float Model in NN7, und hoffe, dass ich es gut genug beschreiben kann, da Deutsch nicht meine Muttersprache ist.
ich möchte die Breite des 2. Divs (.block) nicht festlegen, so dass ich später unterschiedliche Bilder mit unterschiedlichen Breite rechts von dem diesen Div platzieren kann.
Funktioniert wunderbar, in IE ab 5.0 und in NN6. Es geht in NN7 aber nur wenn den Text kurzer als eine Zeile ist. Bei längeren Texte schiebt NN7 den 2. Div eine Zeile tiefer als den 1. Div anstatt den Text auf einer neuer Zeile zu bringen.
"width:auto;" in den 2. Div ändert nichts.
Gibt es einen Weg um dieses Problem?
Vielen Dank in Voraus |:-)
Gruss
Alan
Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE TYPE="text/css">
body{
background-color:#ffffff;
margin: 30px 12px 20px 12px;
font-family: Arial, sans-serif;
color:#000000;
font-size:12px; font-weight:400; }
/* Used in <div> as holder for block-label and block divs */
.block-holder {
width:756px;
position:relative;
background-color:#eee; }
.block-label {
width:214px;
float:left;
padding-top:10px; }
.block {
float:left;
padding-top:10px;
background-color:#fedcba; }
/* Used in <p> */
.label { margin-left:65px;
font-size:1.0em;
font-weight:600;
background-color:#abcdef;}
/* Used in <p> */
.text {
white-space:normal;}
</STYLE>
</HEAD>
<body onLoad="{window.focus()}">
<div class="block-holder">
<div class="block-label">
<p class="label">
Label 1
</p>
</div>
<div class="block">
<p class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<div class="block-label">
<p class="label">
Label 2
</p>
</div>
<div class="block">
<p class="text">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
</div>
</BODY>
</HTML>
-
Hallo,
du muss das float:left; dem selektor ".block-label" geben, nich dem ".block".
Dem selektor ".block" musst du, wenn du es so machen willst, dann noch mit
margin-left:...; versehen und bei der wertangabe einen kompromis in bezug auf
verschiedenen browser finden.Gruss, Jan aus Dresden
-
Hallo,
vielen Dank! - it works - ohne Marginprobleme - auch in IE5 - aber die vertikale Positionierung in IE 6 scheint problematisch zu sein. Eher ein Problem für nächste Woche.
Gruss,
Alan
-