www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: [RESOLVED] Auto size of divs by content

  1. #1
    Join Date
    Aug 2010
    Posts
    13

    resolved [RESOLVED] Auto size of divs by content

    Hi,

    I'm trying to find information about how a div auto-sizes itself by it's content.
    I'm encountering some strange behavior which I don't understand.

    I have a container div and in it a content div. something really basic:
    Code:
    <div id="container">
    <div id="content">
    hello
    </div>
    </div>

    The content div has padding and a border.
    container is positioned absolute and content relative.
    It seems that the container div is sizing it's width based only on the content area of the contained content div (ignoring the padding and border), but it's height IS considering both.

    Any ideas as to why this is the case? (FF, safari, chrome).

    And any ideas how I can fix this?

    thanks
    Yaron

  2. #2
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Can you possibly provide a link?

  3. #3
    Join Date
    Aug 2010
    Posts
    13
    Sorry, I don't have a link.

    but here is a full version of a test I wrote. Using Safari, Chrome or FF with FireBug I can clearly see the container's size ignores the content's padding and border.

    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    <html>
    <head>
    </head>
    
    
    <body>
    <div id="container">
    <div id="content">
    hello
    </div>
    </div>
    
    <style type = "text/css">
    #container {
    	position:absolute;
    	display:block;
    	z-index:5000;
    	
    }
    
    #content {
    	position: relative;
    	width:100%; 
    	color:#555;
    	padding:4px 10px 4px 10px;
    
    	border:2px solid #ddd;
    
    	margin: 0px;
    	
    	font-family:tahoma;
    	font-size:11px;
    
    
    	box-shadow: 0px 0px 6px #000;
    	-moz-box-shadow: 0px 0px 6px #000;
    	-webkit-box-shadow: 0px 0px 6px #000;
    	border-radius: 6px;
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    }
    
    </style>
    
    </body>
    </html>

  4. #4
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    I see the padding. I have attached what I see in my FireFox.
    Attached Images Attached Images

  5. #5
    Join Date
    Aug 2010
    Posts
    13
    The way it looks on the screen is fine.

    However, if you have FireBug installed and you trace through the DOM you see the container is small and the content div is overflowing it. It's because the container is the size of the text without the border and padding.

    So the problem starts when I try to adjust other things according to the container's size.

  6. #6
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Couldn't you just do this:


    <div id="content">hello</div>

    <style type="text/css">
    #content {
    width:auto;
    color:#555;
    padding:4px 10px 4px 10px;
    border:2px solid #ddd;
    margin: 0px;
    font-family:tahoma;
    font-size:11px;
    box-shadow: 0px 0px 6px #000;
    -moz-box-shadow: 0px 0px 6px #000;
    -webkit-box-shadow: 0px 0px 6px #000;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    float:left;
    display:block;

    }

    </style>

    Is that what you want? You really dont need the other div surrounding it.

  7. #7
    Join Date
    Aug 2010
    Posts
    13
    Yes, that would work.

    However, in my real code I add another div with an image inside the container (it's a small arrow pointing down which simulates a prompt bubble effect). And I want the container div to contain both the text and this arrow.

  8. #8
    Join Date
    Dec 2005
    Posts
    2,984
    Why not just put the arrow inside the content div as a background image? (or a regular img tag for that matter?)

    DIVITIS
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  9. #9
    Join Date
    Aug 2010
    Posts
    13
    I guess I could do that.
    In the meantime I solved my problem with JS (which is not ideal).

    But I'm also trying to understand how css and rendering works.
    I'm not quite sure why the container ignores it's content's padding and border. What in the css spec causes this behavior.

  10. #10
    Join Date
    Dec 2005
    Posts
    2,984
    Did you look?


    10.6.7 'Auto' heights for block formatting context roots

    In certain cases (see the preceding sections), the height of an element is computed as follows:

    (1) If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

    (2) If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

    (3) Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.
    http://www.w3.org/TR/CSS2/visudet.html#root-height
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  11. #11
    Join Date
    Aug 2010
    Posts
    13
    Hey,

    Yes, I did. The height property is indeed very straight forward, but I'm talking about the width. The documentation for it is not as clear (unless I didn't find the right place to look)

  12. #12
    Join Date
    Aug 2010
    Location
    Germany
    Posts
    7
    Could you tell us why the outer container has to be positioned absolute and the inner one relative ? The other way round could be more comprehensible.
    There is a lot of issues when using positioned elements in different interconnections.

    Anodyne

  13. #13
    Join Date
    Aug 2010
    Posts
    13
    Hi Anodyne,

    What I'm doing is generating something like a tool-tip for certain fields. The tooltip has the actual text with a border and a small arrow-like triangle pointing at the control which the tool-tip belongs to.

    So I'm using the 'container' div to hold both the content and the arrow. It is added to the container of the control, and positioned absolute based on the control's position in it's container.

    As for content, I guess it can be absolute as well. Will that solve my problem?

  14. #14
    Join Date
    Aug 2010
    Location
    Germany
    Posts
    7

    Talking

    Okay.
    • First off all you don't need a display: block for a div. A div is already a so called block element and display: block only blows up the code.
    -
    • secondly you might have to use position: absolute on the tooltip to make it display outside the normal element flow which you actually want as I can tell from your z-index:5000. An absolute positioned element but "floats" outside the normal content flow and thus will be above the other elements anyway (as long as you don't have other elements with absolute position or z-index in the aerea.
      So, if the latter is not the case: No z-index.

    • thirdly: why do you want a position: relative; for the inner div ? I cannot see a reason for this (and I don't know all the effects when using an outer absolute positioned div, I just know from experience that it could be problematic.)
      May be you use a span tag instead of the div and give it your paddings and a certain width. It depends so much on what you want to do exactly. Shall the tooltip appear on hover over the element you are pointing to ? Is there always the same one word in the tooltip ? (text-align: center; would suffice in this case) and so on.


    By coincidence I am struggeling with a tooltip myself in the moment and CHROME (IRON) and SAFARI (both webkit engine browsers) don't render a display: inline; properly. You see, to be able to solve a problem one would need much more information.

    Just for the record here my tooltip try, it points to links and should display left of the link element on hover over the link (just ignore the colors):
    <code>
    a.content-tooltip span {
    display: none;
    padding: 2px 4px;
    width: 160px; /*my favourite width in the used layout, various texts*/
    margin-left: 5px; /*the distance to the link element*/
    border: 1px solid #F6ECB4;
    background: #0F1D39;
    color: #D25B00;
    line-height: 15px;
    letter-spacing: 1px;
    }
    a.content-tooltip:hover span {
    display: inline; /*to make the tooltip follow the link inline*/
    position: absolute; /*to get the tooltip out of the normal flow so it displays on top of the following elements*/
    }
    </code>


    Cheers,
    Anodyne
    html-syntax:
    <code>
    <a class="content-tooltip" href="thisAndThat.html">Blabla<span>Tooltip</span></a>
    </code>

    works fine even in IE7, of course in FIREFOX and OPERA but displays the tooltip not inline in CHROME and SAFARI as mentioned before. So you see, I need some clues as well

  15. #15
    Join Date
    Aug 2010
    Location
    Germany
    Posts
    7
    Addendum:
    Apply the border and border radius stuff to the outer container (much better) or use a p tag instead of a span.

    Anodyne

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles