Solved

get container div to auto fit its content

Posted on 2007-11-27
6
6,578 Views
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?

0
Comment
Question by:bhomass
  • 3
  • 3
6 Comments
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 80 total points
Comment Utility
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.
0
 

Author Comment

by:bhomass
Comment Utility
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?
0
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 80 total points
Comment Utility
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.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:bhomass
Comment Utility
in a round about way, it does make sense. no wonder css is one of wierdest things around.
0
 
LVL 29

Expert Comment

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

Author Comment

by:bhomass
Comment Utility
sorry to let it hang for a while. I thought I already awarded the points.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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 …

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now