Gunnar Bittersmann: Zwei Divs Nebeneinander und Untereinander

Beitrag lesen

@@Matthias Apsel:

nuqneH

also wenn sie nebeneinander sind, soll der Abstand zwischen ihnen und rechts und links davon gleich sein.

Das halte ich mit CSS für unlösbar.

Ich nicht.

vielleicht gibt es passendere Elemente, möglicherweise könnte das äußere der <body> sein.

Möglicherweise könnte der Konjunktiv unangebracht sein.

und floatest eines.

Nö, keines.

Im IE 9 funktioniert es (der 8er kennt noch keine Media-Queries):

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
    <meta charset="UTF-8"/>  
    <title>TEST</title>  
    <style>  
[code lang=css]p  
{  
  background: #042;  
  color: white;  
  display: inline-block;  
  padding: 1em;  
  text-align: left;  
  vertical-align: top;  
  width: 200px;  
}  
  
@media screen and (max-width: 500px)  
{  
  body { text-align: center }  
}  
  
@media screen and (min-width: 501px)  
{  
  body { text-align: justify; text-align-last: justify }  
  body::before { content: "\200B  " }  
  body::after { content: " \200B " }  
}

</style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </body>
</html>[/code]

Wäre schon, wenn die anderen Browserhersteller auch endlich mal aus dem Ar^WTee kommen würden und 'text-align-last' implementierten.

Wenn man die U+200B ins Markup schreibt (pfui), steht 'body::after' anderweitig zur Verfügung. Dann sollte es mit dem Trick browserübergreifend funktionieren.

Qapla'

PS: Die Breitenangaben hab ich mal so gewählt, dass man keinen überbreiten Monitor haben muss, um in den Genuss zu kommen, was zu sehen.

--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)