Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

css float parent doesn't shrink

CSS

  • Please log in to reply
5 replies to this topic

#1 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 21 November 2011 - 07:58 AM

Hello,

I have a container, and inside this container I have multiple div in float left.
When their too many content in my container, the float jump to a new line, and this is perfect.
But the container dosen't shrink back to the size of the biggest line, it keep the size like the float didn't jump to a new line.

Not sure if I explain myself correctly, but I don't really see how to explain it.
And sadly, I can't post a preview since every data is confidential data.

Hope someone can help me
  • 0

#2 codehutch

codehutch

    CC Newcomer

  • Member
  • PipPip
  • 13 posts

Posted 22 November 2011 - 05:29 PM

Hi,

Maybe you code provide a sample with just simple html, just so we can see what really is your problem? or maybe an image with rectangles [with color] saying, "this is the parent/bigger div", "this is the one that jumps to a new line". I think you get my point, it's hard to imagine CSS without the help of graphics :(
  • 0

#3 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 22 November 2011 - 11:08 PM

The fact that your text continues on the next line means there must be some width set, likely at a parent...
The div will just inherit the width.
@codehutch Here you can see the problem if you "run" it:
<!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>
</head>
<body>
<div style="width:200px;">
    <div style="background-color:#cccccc; float:left;">        
        <p>text text text text teeeeeeeeeeeeeeeeeext </p>
    </div>
</div>
</body>
</html>

Depending on the exact problem this behaviour causes for your website, the solution might be to add another container in the floating div.
<!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>
</head>
<body>
<div style="width:200px;">
    <div style="float:left;">        
        <span style="background-color:#cccccc;">
            text text text text teeeeeeeeeeeeeeeeeext
        </span>
    </div>
</div>
</body>
</html>

  • 0

#4 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 23 November 2011 - 06:09 AM

Not exactly
Here a screenshot and part of the code
Depending on your resolution you should view the error... normally their a script that ajust everything, but it make it too complex for the example.
Attached File  Demo.rar   36.05KB   183 downloads

Attached Thumbnails

  • Screenshot-1.png

  • 0

#5 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 23 November 2011 - 06:18 AM

<div style="max-width: 1548px; visibility: visible; [B]width: 1500px;[/B] left: 135px; opacity: 0; display: none;" class="menuGPS _menuGPS">
Is that width really needed? I mean there are 3 divs in that div with each 300px, so 900px would make sence, 1500px would not.
  • 0

#6 Vaielab

Vaielab

    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 23 November 2011 - 06:33 AM

I think the width is when I save the page that firefox added it.
It's not in my original code.

Anyway thank you, but I think I'll return to the original plugin (mbMenu , jQuery (mb)Menu 2.7 (New!) « Matteo Bicocchi's Blog they use table) and when the table is too big, create a new tr
For now I hink I'll leave it like this, maybe in a near future I'll come back to create a better solution.

Thx
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download