Make Div as Wide as It Needs to Be

Make Div as wide as it needs to be

Is this (jsFiddle) what you're trying to accomplish?

I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.

Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.

html - Make a div as wide as the page, while inside another div

try to make

body {
    position: relative;
}

.dropdown {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

make div only as wide as text content

display: inline-block; or float:left on .api-tile-ribbon-front should do what you want.

How can I make an element as wide as it is high in css?

You might need javascript
using jquery it should be something like:

$('#element').css({
     width: + $('#element').height()
})

but the above is very rough I didn't even test it

Update it works- see my fiddle:
fiddle for above

or I think I might been a bit sloppy if you prefer:

var el=$('#element');
el.css({
    width: + el.height()
});

this

CSS - How to make a div as wide as a containing child img

The reason .gallery__card is wider than gallery__card__imgis because of the text you have in .gallery__card. If you remove the text, it will stay as wide as .gallery__card__img. See here.

You can set you imgs to have width: 100% and remove your static height property like here, but then you have to make sure to maintain aspect ratios of all the images you are using; or you will have differing heights (if that's an issue).

Otherwise, you have to change the way you are constructing your elements.

Make top div as wide as the div below it

Here is a solution based on my comment above, it uses media queries:

Since the boxes are fixed width, it is possible to pre-determine how many boxes fit one one line if the screen is [x0, x1] pixels wide. You can feed this information to CSS media queries to create several rules, each one specifies the width of the box for a given range of widths. Here is an example (generated using excel):

                                        .rect { width: 100px; }
@media screen and (min-width:  214px) { .rect { width: 206px; } }
@media screen and (min-width:  320px) { .rect { width: 312px; } }
@media screen and (min-width:  426px) { .rect { width: 418px; } }
@media screen and (min-width:  532px) { .rect { width: 524px; } }
@media screen and (min-width:  638px) { .rect { width: 630px; } }
@media screen and (min-width:  744px) { .rect { width: 736px; } }
@media screen and (min-width:  850px) { .rect { width: 842px; } }
@media screen and (min-width:  956px) { .rect { width: 948px; } }

Code, Demo

Notes:

• I used multiples of 106px (100px + 2px border + 4px margin).
• min-width is the width of screen, not that of container. 2px were added to compensate for black border.
• The widths of the rectangle start from 100, not 106 since they already have 2px border and 4px margin.
• The order of @media rules matter (min-widths ascending).
• The width of "space" (such as the one between two inline block) depends on various factors including font family and size; I've floated the boxes so that they become block elements and spaces do not count.

---

Related Topics