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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts

    How to make a fluid width for a div?

    I need a fluid width for my comments.

    On the site, you can see their width on the divs need to change to look properly.

    Anyone know how to achieve this ? I tried using % with widths, it worked but the % needs to change dynamically cause sometimes it goes over to the next line like it does now.

    http://anothera.net/v2/tutorials/pho...city-w-a-twist

    Last edited by cixxy; 06-09-2010 at 07:57 AM.

  • #2
    New Coder
    Join Date
    Apr 2010
    Location
    Norfolk, UK
    Posts
    34
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm not completely sure what the problem is, but if the width is left blank or auto, just using margins should contain it in the space that you have - if the width needs to be fluid, which its not at the moment, then the div containing all the comments can scale, the comments inside would stretch to fit automatically.

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by craftygeek View Post
    I'm not completely sure what the problem is, but if the width is left blank or auto, just using margins should contain it in the space that you have - if the width needs to be fluid, which its not at the moment, then the div containing all the comments can scale, the comments inside would stretch to fit automatically.
    1. the left part of the column of divs is a fixed width

    2. the right part is left blank /auto. I'm trying to get it not stretch 100% to the next line but contain it in the 2nd column to no avail. This is because I can't use a fixed width since the integer changes with every comment

    3. I have one margin in there defined. you suggest more?

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    You need to remove float:left; from your wpcommentright..

    If you want the text to flow underneath the avatar then keep it as it is, or if you want it to keep the gap then you need to add margin-left:130px; to wpcommentright also.

  • Users who have thanked Scriptet for this post:

    cixxy (06-10-2010)

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks!! Also adding a position:relative; fixed everything

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    position:relative; wouldn't really change anything here but glad you got it working anyway. Basically if you want one of the columns to be of fluid width then you can't specify float:left; otherwise it won't sit next to the other float (because it will eventually go to 100% width rather than taking up the remaining space), then if desired you can add a left/right-margin so that it doesn't wrap around the float next to it.


  •  

    Posting Permissions

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