css float parent doesn't shrink

#1
Vaielab

Posted 21 November 2011 - 07:58 AM

Programming God

Members
547 posts

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

#2
codehutch

Posted 22 November 2011 - 05:29 PM

Newbie

Members
13 posts

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 :(

#3
wim DC

Posted 22 November 2011 - 11:08 PM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

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>

#4
Vaielab

Posted 23 November 2011 - 06:09 AM

Programming God

Members
547 posts

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.

Demo.rar 36.05K 6 downloads

Attached Files

Screenshot-1.png 104.54K 17 downloads

#5
wim DC

Posted 23 November 2011 - 06:18 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

<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.

#6
Vaielab

Posted 23 November 2011 - 06:33 AM

Programming God

Members
547 posts

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