get container div to auto fit its content

Posted on 2007-11-27
Last Modified: 2008-06-04
I have a div containing another div. the inner div has a fixed width setting, width=814px.

I want the out div to hug the inner div. I tried <div id="outer" style="width:auto;">, but it had no effect. it is still a bit wider than the inner one. did I do this wrong?

Question by:bhomass
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 29

Accepted Solution

Göran Andersson earned 80 total points
ID: 20362418
Setting width:auto; (which is default) means that the div will take up the full width of the page/parent element.

If you for example use float:left; on the outer div, the width will adjust itself to the inner div.

Author Comment

ID: 20362525
it seemed to have done the job. but I don't understand why.

as far as I understand, float:left lines up the div in a row, aligned to the left relative to its parent. in this case, the outter div would align itself to its parent, which is not even a div, it is a td. So what did it have the effect of shrinking the outer div to the size of the inner div? could you explain?
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 80 total points
ID: 20363799
When the div floats, it no longer tries to occupy the full width of the page (as this would totally defeat the purpose of floating). The only other information that it can base it's size on, is the size of it's contents.
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 20363829
in a round about way, it does make sense. no wonder css is one of wierdest things around.
LVL 29

Expert Comment

by:Göran Andersson
ID: 20363900
Sometimes things doesn't make sense until you consider the alternatives, and realise that they make much less sense. :)

Author Comment

ID: 20417512
sorry to let it hang for a while. I thought I already awarded the points.

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question