Geek Answers Handbook

How to make a box big enough for a specific item inside?

Consider the following document:

<DOCTYPE html> <html><head><title>test</title></head> <body> <div> <img src="..." alt="" style="clear:both" /> <p>Lorem ipsum...</p> </body></html>

The image (in my case it is actually an embedded SVG created by ad-hoc) has a size that is not known in advance. How is it possible that the enclosing div is wide enough to hold the image (i.e. such that the paragraph below breaks with the same width as the image above)?

This is a continuation of this issue . The code I'm working on right now can be found here . The text above the board should have the same width as the board.

+4
source share
2 answers

This can be done with display:table and a minimum width. I used width:1px in the example below, but any minimum width will work.

HTML:

 <div> <img src="..." alt="" /> <p>Lorem ipsum...</p> </div>

CSS

 div { width: 1px; display: table; }

The result will look something like this:

enter image description here

JS script example

+3
source

you can use float to place the container

 <div style="float:left;background:yellow;"> <img ...> <p>...</p> </div>

or you can try (doesn't work with IE7 ... but you can probably fix it)

 <div style="display:inline;display:inline-block;background:yellow;"> <img ...> <p>...</p> </div>

and newer mozilla and webkit browsers have

 <div style="width:fit-content;margin:0 auto;background:yellow;"> <img ...> <p>...</p> </div>

I'm not sure what will happen to your SVG, but in the <svg> declaration you can specify the actual size of the rendering of the AFAIK vectors

hoping to be helpful ..

+1
source

More articles:


All Articles