Inramade "boxar" för innehåll

Exempel på inramade "boxar" i CSS

Här är ett exempel på inramad text i en box där man också får se hur Internet Explorer och Mozilla ser på kodningen för denna.

Som man kan se, om man tittar på boxen i både Internet Explorer och i Mozilla, så respekterar Mozilla de angivna måttet för boxens höjd medan IE gör den högre när texten inte ryms innanför den angivna höjden.

Text (eller annat) som ligger under boxen förskjuts nedåt i IE när boxen "växer", medan en del flyter ut nedanför i Mozilla och kan då överlappa eventuell text som placerats med avsikt att få det under boxen.

Det beror på att boxen i Mozilla fortfarande har den höjd som man har angivit för den.

Det gäller alltså att kontrollera att höjden för boxen är tillräcklig, om man vill ange en fast höjd för den.

Bara lite text i en stor box ...

... utan angiven höjd

Däremot får boxen automatiskt rätt (tillräcklig) höjd i båda webbläsarna om man inte anger någon höjd alls, vilket alltså är ett alternativ att föredra om man inte är helt säker på att det man vill ha i boxen verkligen rymms där.

Ovanstående exempel ger alltså en inramad text. En alternativ variant är att också använda "overflow" om man inte har något emot att få en scrollist för boxen, när inte all text ryms.