Gunnar Bittersmann: width 100% funktioniert nicht korrekt

Beitrag lesen

Hello out there!

#schwarzelinie { background-color:000000; height:1px; position:absolute; top:100px; left:200px; width:100%; z-index:2; }

<div id="schwarzelinie">(leeres Pixel)</div>

Warum div? Du möchtest eine horizontale Line → horizontal rule → hr

hr {  
  border-top: 1px solid black;  
  border-bottom: 0 none;  
  height: 0;  
  margin-left: 200px;  
}

Die Linie geht bis zur rechten Inhaltskante [CSS2 §8.1]; dann kommen noch Innen- und Außenrand der body-Box, evtl. auch noch der html-Box. Diese müsstest du auf 0 setzen, wenn du willst, dass die Linie bis zum Viewportrand reicht.

Oder du verschiebst die Line um den Wert dieses Abstandes, wobei den dann setzen musst und dich nicht auf Browserdefaults verlassen darfst:

html {  
  margin: 0;  
  padding: 0;  
}  
body {  
  margin: 0;  
  padding: 42px;  
}  
hr {  
  border-top: 1px solid black;  
  border-bottom: 0 none;  
  height: 0;  
  left: 42px;  
  margin-left: 158px;  
  position: relative;  
}

See ya up the road,
Gunnar

--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)