Solved

get container div to auto fit its content

Posted on 2007-11-27
6
6,586 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
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.
0
 

Author Comment

by:bhomass
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?
0
 
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.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:bhomass
ID: 20363829
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
ID: 20363900
Sometimes things doesn't make sense until you consider the alternatives, and realise that they make much less sense. :)
0
 

Author Comment

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Menu Selected on Chrome for Windows 13 22
Easy responsive table out of existing table 28 60
Problem with spacing columns on a row in a table 10 28
removing a class in javascript 4 49
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

837 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