Div Size Automatically size of content

views:

answers:

Div Size Automatically size of content

I am trying to make a h2 header for sidebar widgets but I want the width of the div class to be whatever width the content becomes. It seems I can't just set a width because those headlines with longer content then shorter content makes it break.

http://mibsoftware.us/clients/raveis/

How can I simply make width stretch/change depending on the length of content there is? Any help would be greatly appreciated.

h2 { display: inline }

Litso 2010-09-20 12:37:14

Don't forget to set the line-height to make sure the h2's are all the same height too, this seems to fail when I try it on your live example.

Litso 2010-09-20 12:38:25

The best way to do this is to set display: inline;. Note, however, that in inline display, you lose access to some layout properties, such as manual height and vertical margins, but this doesn't appear to be a problem for your page.

Delan Azabani 2010-09-20 12:37:19

yes when i set to `display:inline` i can't set a bottom margin which is desperately needed. thoughts?

HollerTrain 2010-09-20 12:41:45

If display: inline; isn't working, try out display: inline-block;. :)

Kyle Sevenoaks 2010-09-20 12:58:06

does using `display:inline` limit me from using `margin-bottom` commands? now that i'm using `display:inline` i can't add bottom margin to it! thoughts?

HollerTrain 2010-09-20 13:02:22

Using just inline does, that's why I suggested using inline-block, this removes that limit.. afaik.

Kyle Sevenoaks 2010-09-20 13:25:39

`inline block` makes it span 100% which is what I don't want

HollerTrain 2010-09-20 14:22:07

+1 A:

As far as I know, display: inline-block is what you probably need. That will make it seem like it's sort of inline but still allow you to use things like margins and such.

Svish 2010-09-20 13:07:17

but it makes my div 100% in width which is what i don't need

HollerTrain 2010-09-20 14:22:30

@HollerTrain: What browser are you using? Cause it works perfectly here. If I remove your `width` and `text-align`, and adds that `display:inline-block` on `h2.widgettitle`, I get the result you want.

Svish 2010-09-20 18:42:50

By the way, if I were you, I would run the site through the http://validator.w3.org as well as try to slim it down quite a bit. I do not have a bad internet connection and not a slow computer, but your page took almost 1.5 minutes to load. You have for example some images that are a lot bigger than they need to be; around 200kB each. Install http://getfirebug.com if you haven't, open up its Net tab and reload your page (Ctrl+F5, probably)

Svish 2010-09-20 18:52:13

ah you are right! must have been an issue with Firebug. you saved my day and taught me something (more valuable!)

HollerTrain 2010-09-20 19:26:11

ansaurus

tags:

views:

answers:

Div Size Automatically size of content

related questions