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>
Problem :
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:
… while I would like to get something like:
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?
Comments
Comment posted by Siraj Ahmed
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
Comment posted by ZioByte
This is strange: it will follow horizontal resize (it will leave blank space between text and right border), but it will
Comment posted by obscure
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.
Comment posted by ZioByte
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”.
