Let's say I have an img element inside a div, how do I make the div have the same width and height of its content using CSS?
views:
87answers:
6
+4
A:
Floating the div would make it shrinkwrap and so the div would only have room for the content inside.
You will probably need to use clear on the elements coming afterwards.
Another way would be to use inline-block.
meder
2010-09-15 00:08:52
@Marko - Huh? Did I forget something?
meder
2010-09-15 00:13:35
+1 Misread the question, thought he's trying to get a child to fill the parent. Gonna delete that comment, shorty after this one too :) haha
Marko
2010-09-15 00:15:04
does inline-block work in most browsers? I've never really used it becuase I've been unsure about it.
WalterJ89
2010-09-15 00:30:40
@Walter: [of course it does.](http://www.quirksmode.org/css/display.html)
Matt Ball
2010-09-15 01:05:43
IE supports inline-block on natively inline elements, you need to declare `display:inline;` afterwards for IE only on native block levels.
meder
2010-09-15 01:05:54
+2
A:
inline-block is right.
<div style="border:1px solid red;display:inline-block">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" style="border:1px solid green" />
</div>
Sammy
2010-09-15 00:15:31
I thought that inline-block had limited browser support (i.e. I thought it was pretty much limited to IE), but I just tested your example on Safari (webkit) *and* Firefox, and it works like a charm. ...Been doing this for years -- learn something new every day. Thanks Sammy!
Lee
2010-09-15 00:32:55
@Lee you're right. I just tested it in IE6, 7 and 8 and the width wasn't constrained to the size of the image inside in all three. Oh well, never really felt a need to use this myself.
Sammy
2010-09-15 00:42:28
+2
A:
By default, the div will have the same height -- unless you restrict it somehow, or add padding or margin. But the default width will fill the available space. If you want the width to collapse down to "shrink-wrap" the content, you'll either have to float it, or make it absolute positioned.
The problem with this (depending on your needs) is that both of those effectively take it out of the normal layout. If you need it to still be part of the normal layout, you'll have to do something like this (the borders are included so you can tell what's going on):
<html>
<head>
<title>pdf test</title>
<style type="text/css">
#a {
position:relative;
border: 1px solid green;
}
#b {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div>Top</div>
<div id="a">
<div id="b">
asdf<br/>
typewriter</br>
fdsa
</div>
<div style="clear:both;"></div>
</div>
<div>
Bottom
</div>
</body>
</html>
The outer div #a works like a normal div. The important part here is that #a is position: relative. That sets up a positioning context, within which #b will float. This "double-wrapped" approach will let the div still work within the layout like a "normal" div, while allowing you to "sniff" the width/height from #b via Javascript, if you need it.
So... it depends on what your needs are -- but this should set you in the right direction.
good luck!
Lee
2010-09-15 00:27:27
All the stuff I wrote here is true -- and it'll work -- but @Sammy's answer is probably the way to go.
Lee
2010-09-15 00:34:15
I don't see how the `position:relative` is relevant here, you clear the float and that's all that's necessary. If it was absolute and not floated, then you'd need it.
meder
2010-09-15 01:11:43
@meder - you're right. In this context, the outer div is unnecessary unless you use `position:absolute` instead of `float:left` for `div#b`.
Lee
2010-09-15 03:04:25
+1
A:
Inline-Block is not supported in IE for any default block level elements (like div, h1-h~ etc).
Inline block behaviour is to auto size the width and the height while allowing things like position, margins and padding. So all you really need to do is use
<span style="display: inline-block">
</span>
and then you will have some browser compatible code :)
Enjoy.
Jason
2010-09-15 01:36:14