Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div's minimum width?

    A div which has no speficied width, will be as width as the parent element allows.
    Is there a way to make the div as minimum width as the content inside the div allows? Just like opposite way than it behaves normally.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The only way to do this is to either float the div to the left or make it position:absolute.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    The only way to do this is to either float the div to the left or make it position:absolute.
    Thanks a lot, that helped.

  • #4
    Regular Coder
    Join Date
    Mar 2005
    Location
    D0u$h!t3 k4?
    Posts
    512
    Thanks
    2
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    The only way to do this is to either float the div to the left or make it position:absolute.
    Wouldn't "display:inline" also work, assuming no block-level properties are required, such as text-align ?
    Last edited by rpgfan3233; 11-06-2006 at 09:48 PM.
    PHP Code:
    $hello file_get_contents('hello.txt'); echo $hello
    hello

  • #5
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by rpgfan3233 View Post
    Wouldn't "display:inline" also work, assuming no block-level properties are required, such as text-align ?
    I also ask this

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    @rpgfan Yeah you could do that but then why even use a div? Why not a span?

    If the element was display:inline and required borders and such then it wouldn't work because margin nor padding could be applied to the inline element. A border might also not work correctly. IE has inline-block but it doesn't work with other browsers. Some other browsers support display:table-cell as well. Check out this example. Notice how the top padding is pretty non existant, as well as margin and border. You could add top padding to the #container but what if you didn't want everything to be so far from the top?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    }
    #container {
    text-align:center;
    position:relative;
    }
    .box {
    padding:10px;
    border:1px solid #000;
    background:#EEE;
    margin:50px 0;
    }
    #fleft {
    float:left;
    }
    #abs {
    position:absolute;
    left:0;
    top:200px;
    }
    #inbox {
    display:inline;
    }
    .clear {
    clear:both;
    line-height:0px;
    font-size:0;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div class="box" id="fleft">This is a box that is floated left</div>
    	<div class="box" id="inbox">This is a box with display:inline;</div>
    	<div class="box" id="abs">This is an absolutely positioned box</div>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Mar 2005
    Location
    D0u$h!t3 k4?
    Posts
    512
    Thanks
    2
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    @rpgfan Yeah you could do that but then why even use a div? Why not a span?
    I agree with that point. I can think of one case, however, in which it may be beneficial to use a div with "display:inline" rather than a span: validation. For example, you might need
    Code:
    <div class="foo">
    <ul class="bar">
    <!-- skipping some stuff -->
    </ul>
    </div>
    where "div.foo { display:inline; }" is defined. If you used a span in place of div.foo, it would not validate.

    Of course, in that case, why would you need a parent element to display as inline-level with a child element displaying as a block-level element, right? I agree with you because there is not an example I can think of to make a decent counterexample and what you state also makes sense.
    PHP Code:
    $hello file_get_contents('hello.txt'); echo $hello
    hello


  •  

    Posting Permissions

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