Putting -Moz-Available and -Webkit-Fill-Available in One Width (CSS Property)

How can I make all images of different height and width the same via CSS?

Updated answer (No IE11 support)

img {

    float: left;

    width:  100px;

    height: 100px;

    object-fit: cover;

}

<img src="http://i.imgur.com/tI5jq2c.jpg">

<img src="http://i.imgur.com/37w80TG.jpg">

<img src="http://i.imgur.com/B1MCOtx.jpg">

Width equal to content

By default p tags are block elements, which means they take 100% of the parent width.

You can change their display property with:

#container p {
   display:inline-block;
}

But it puts the elements side by side.

To keep each element on its own line you can use:

#container p {
   clear:both;
   float:left;
}

_{(If you use float and need to clear after floated elements, see this link for different techniques: http://css-tricks.com/all-about-floats/)}

Demo: http://jsfiddle.net/CvJ3W/5/

Edit

If you go for the solution with display:inline-block but want to keep each item in one line, you can just add a <br> tag after each one:

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

New demo: http://jsfiddle.net/CvJ3W/7/

How can I let a div automatically set it own width?

Solution with inline-block

You could try display: inline-block and see if that works in your situation. However, you won't be able to center it using margin-left: auto & margin-right: auto because that technique requires a width value.

If possible, use display: inline-block and set text-align: center on it's container.

<div style="text-align: center">
  <div style="display: inline-block;">
     This will expand only as far as it needs to
  </div>
</div>

Solution using Flexbox + container div

The original answer above was written in 2011, before flexbox was implemented. You can achieve a similar effect

<div style="display: flex; justify-content: center;">
  <div>
     This will expand only as far as it needs to
  </div>
</div>

Solution without container div

There is another way to do this without a parent element.

1. Set display to inline-block to make the div width fit to its content.
2. Use position: relative and left: 50% to position its left edge to 50% of its containing element.
3. Use transform: translateX(-50%) which will "shift" the element to the left by half its own width.

.center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Set the table column width constant regardless of the amount of text in its cells?

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

table {

  border: 1px solid black;

  table-layout: fixed;

  width: 200px;

}

th,

td {

  border: 1px solid black;

  width: 100px;

  overflow: hidden;

}

<table>

  <tr>

    <th>header 1</th>

    <th>header 234567895678657</th>

  </tr>

  <tr>

    <td>data asdfasdfasdfasdfasdf</td>

    <td>data 2</td>

  </tr>

</table>

How to make multiple divs display in one line but still retain width?

You can use display:inline-block.

This property allows a DOM element to have all the attributes of a block element, but keeping it inline. There's some drawbacks, but most of the time it's good enough. Why it's good and why it may not work for you.

EDIT: The only modern browser that has some problems with it is IE7. See Quirksmode.org

---

Related Topics