Thomas J.: Positionierungsproblem

Beitrag lesen

Moin

Sooo, also erstmal besten Dank für die Mühe.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<title></title>
<style type="text/css">
<!--
div    { border:1px solid blue; }
#eins  { width:40%; float:left; }
#drei  { width:40%; float:left; }
#vier  { width:60%; margin-left:40%; position:relative; right:-1px; }

Das dürfte an dieser Stelle überflüssig sein.
Das Problem mit dem 1-Pixel-Versatz tauchte bei meiner Version oben nur im Opera auf, der wahrscheinlich ein kleines Problem mit float:right hat.

#fuenf { width:100%; clear:left; }
-->
</style>

</head>
<body>

<h1>5 DIVs</h1>

<div id="eins">
<p>eins</p>
</div>

<div id="zwei">
<p>zwei</p>
</div>

<div id="drei">
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
</div>

<div id="vier">
<p>vier</p>
</div>

<div id="fuenf">
<p>fuenf</p>
</div>

</body>
</html>

Meinen Vorschlag bekommst du mit Attribut-Selektoren wohl eher hin. Allerdings steht #vier nicht ganz oben. Muss das denn unbedingt sein?

Naja, vielleicht nicht unbedingt. Eine "normale" Version hatte ich auch schon einigermaßen zusammen, inkl. Fix für die üblichen IE-Boxmodel-Macken.
Nr. 4 wird halt öfters überarbeitet und ist recht textlastig. Daher kam dann auch promt die Frage, ob ich das Ding nicht einfach ganz oben hinschreiben könnte.
Tja, und da hab' ich's halt mal versucht. Man wächst ja schließlich mit der Aufgabe - wobei ich nicht gedacht hätte, daß sich der IE so dermaßen querstellt.

Thomas J.