0

I am trying to draw some rich text in a border; here is an excerpt:

<!DOCTYPE html>
<html>
<body>
<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;width:100%;height:100%;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
</body>
</html>

This seems to draw outside right border: "wrong" rendering ... while I would like to get something like: "right" rendering

Note: second image has been rendered using width:90%; which, of course, is not correct because right margin/padding is dependent on window size, while it should be a fixed number of pixels from right.

What is the "Right Way" to get result I need?

ZioByte
  • 2,690
  • 1
  • 32
  • 68
  • ok you use width and the height but besically the container width and height is set by default so you cannot give any width or height as well – Siraj Ahmed Jan 18 '20 at 13:44

1 Answers1

0

Simply get completely rid of the width and height settings for your outer container <div>. This will make the border's size depending on the size of the content inside.

<div id="140280868923376" class="Container" data-parent-widget="140280868799320" style="margin:30px;padding:10px;border-width:2px;border-style:solid;border-color:blue;border-radius:20px;position:static;order:-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<div style="color:blue;font-size:30px">Ut ut blandit erat. Suspendisse laoreet mattis condimentum.</div><br>
Quisque ullamcorper diam a tortor tempus, in scelerisque mauris facilisis.<br>
<div style="color:red;font-weight:bolder">Aenean rhoncus mattis dolor non efficitur.</div>
</div>
obscure
  • 11,916
  • 2
  • 17
  • 36
  • This is strange: it will follow horizontal resize (it will leave blank space between text and right border), but it will *not* follow vertical resize (it will always leave `margin` between text and bottom border). What if I want to have border fill the available space? – ZioByte Jan 18 '20 at 12:26
  • Actually it ain't too strange. If you resize your browser window vertically, the size (or the occupied space) of the content inside doesn't change. Now if you resize horizontally there's a change because the browser can render more/or less characters per line now and always tries to fill a line with as much characters as possible. – obscure Jan 18 '20 at 12:32
  • Yes, I can understand that, but there's a certain dimension where no wrapping happens anymore, yet horizontal keeps following the enlarging window even if text is "left behind". – ZioByte Jan 18 '20 at 13:17