herwig: spaltenlayout: text-float-problem

Beitrag lesen

Hallo zusammen,

Folgende Frage:

Um dazuzulernen versuche ich gerade, ein Spaltenlayout mittels css zu basteln, wobei ich mich nicht an vorhandenen tipps und layouts orientieren möchte, weil ich denke, ich verstehe schneller, wenn ich selbst dieverse workarounds erarbeite. aber jetzt stehe ich an:

könnt ihr mir sagen, ob der untere zugang überhaupt zielführend ist?
problem im moment: der text rechts verschiebt sich um die pixelbreite der linken spalte nach rechts. ist der linke div zu ende, floatet er nach links. kann ich das umgehen?

hier der code:

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

<title>Spaltenlayout</title>
<style type="text/css">
  body {
    color: black; background-color: white;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;

}

div#Haupt {

border: 1px solid ;
  border-left:200px solid coral;
  background-color:blue;
  }

div#Links {
  background-color: red;
  position: relative; left:-200px;
  float:left;
  width:200px;
  }

</style>
</head>
<body>
<div id="Haupt">
<div id="Links">
links <br />
links links links <br />
</div>
rechts <br />
rechts <br />
rechts <br />
rechts <br />
</div>
</body>
</html>

danke!

herwig