LinuxQuestions.org - CSS: get div to expand with content

Quote:

Originally Posted by Ephracis (Post 3708438)

I am doing some CSS stuff and I have a div which I want to center using "margin: auto". However, the div automatically expands (horizontal) to fill the parent. I would like a way to make it just as wide as it needs to be, according to the content inside it (which will be normal text and <a>s).

Use float:left or float:right to accomplish this. This approach allows other content to flow around the DIV (that may be a good or bad thing).

Look at this page: Learning Sage and scroll down until you see a yellow box at the right entitled "Functions". That's a DIV that is floated right. Its CSS definition looks like this:

Code:

.sidebox {

  width:50%;

  float:right;

  padding:8px;

  border:1px solid black;

  background-color:#ffffe0;

  margin-left:8px;

  margin-top:8px;

  margin-bottom:8px;

}

But centering a DIV is more difficult (CSS entities naturally want to spread across the display). I sometimes use percentage margins along with percentage widths to accomplish this.

Here's my suggestion: visit Web sites until you see the effect you want. Look at the CSS. Copy it.