CODEWITHSUNDEEP
jquerycss
Plummer
Plummer

Reputation: 6688

Auto width with the help of CSS (or JQuery?)

I have a bunch of <li> nodes that need to float left. The total sum of the width of these nodes when float left are larger than their parent container. Instead of the width of the parent node increasing, the <li> expand the height of the parent and essentially flow down to the next line.

Is there a CSS solution to this issue or will I need a jQuery script to alter the size of the parent node based on how many children are in it?

Upvotes: 0

Views: 62

Answers (4)

rdiazv
rdiazv

Reputation: 1153

The immediate parent of the floated elements should have display:inline-block property.

Upvotes: 0

Jon
Jon

Reputation: 3184

I think I understand what you're asking, but maybe not. Check this out. I went overboard on the CSS, but it just illustrates the point. Here's a Fiddle.

<div class="navItems">
    <div class="navOutline">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <!-- Add more items and it'll expand -->
            <li><a href="#">Item 5</a></li>
        </ul>
    </div>
</div>

.navItems ul { list-style:none; margin:0; padding:0; }
.navItems li { display:inline; }
.navItems li:not(:last-child) { margin-right:10px }
.navItems .bumper { margin-right:15px; }
.navItems {
    float:left;
    font-size:14px;    
    padding:5px;
    background:#FFF;
    box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -o-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -ms-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -moz-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
}
.navOutline {
    margin:auto auto;
    padding:10px;
    background:#FFF;
    border:1px dashed #CCC;
}
.navItems a { text-decoration:none; color:#000; }​

Upvotes: 0

Sean
Sean

Reputation: 650

I'm not sure I'm 100% clear on what the issue is and what problem you would like to solve, but with only CSS:

You can keep the li's from stretching the height of the parent if you set a height on the parent equal to the height of the li's.

An overflow:hidden; on the parent might also be desired, unless you want scrollbars.

Upvotes: 0

Madbreaks
Madbreaks

Reputation: 19539

There is not a CSS solution. You can accomplish it with jQuery as you suggest though.

Upvotes: 1

Related Questions