CODEWITHSUNDEEP
csshtmlwidth
anubis
anubis

Reputation: 37

My DIV width is not expanding with the size of its children

I have a parent div (nav) that is 1000px. Within that there is a child div (nav-drop-panel), and within that one another child (drop-panel-col). Basically, the drop-panel-col is a list of links in navigation. As there is a specific height, I can only add so many links before adding another column (so there's 1-4 drop-panel-col divs within nav-drop-panel).

I want the nav-drop-panel div to size itself according to the number of columns within it. So if there's only one, it's smaller than if there's 4. It will never exceed or even come close to the 1000px width of its parent div (nav). For some reason, if I don't set nav-drop-panel to a specific width (which makes it too big for one column), it assigns itself an arbitrary width and all of my columns are pushed down and it looks terrible.

I've tried a few solutions to other related questions from here, but nothing has worked so far.

My HTML: 

<div class="nav-drop-panel">
    <div class="drop-panel-col">
        <a class="cat">Vehicle Graphics</a>
        <a href="/info_truck_graphics.php">Pick-Up Truck</a>
        <a href="/info_van_lettering.php">Van</a>
        <a href="/info_trailer_graphics.php">Enclosed Trailer</a>
        <a href="/info_commercial_truck_graphics.php">Box Truck</a>
        <a href="/info_suv_graphics.php">SUV</a>
        <a href="/car-lettering.php">Car</a>
        <a href="/info_boat_graphics.php">Boat</a>
        <a href="/info_bus_graphics.php">Bus</a>
        <a href="/custom-signs/magnetic-car-signs-vehicle-magnet-sign/">ScratchGuard&#153; Magnets</a>
        <a href="/info_vinyl_Letters.php">Vinyl Lettering and Graphics</a>
        <p></p>     
    </div>
</div>

My CSS:

#nav {
    padding: 0;
    margin: 0;
    list-style: none;
    width: 1000px;
    z-index: 15;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    /* position: absolute;
    left: 0px;
    top: 0px; */
}
#nav .nav-drop-panel {
    background-color: #FFFFFF;
    border-bottom: 3px solid #BBBBBB;
    border-bottom-right-radius: 10px;
    border-right: 3px solid #BBBBBB;
    height: 431px;
    margin-bottom: 0;
    padding-bottom: 7px;
    padding-top: 19px;
    /* position: absolute;
    top: -5px;
    left: 218px; */
}

#nav .drop-panel-col {
    color: #333333;
    float: left;
    font-family: Arial;
    font-size: 14px;
    padding-left: 24px;
}

#nav .drop-panel-col a{
    color: #333333;
    display: block;
    font-weight: bold;
    height: 19px;
    margin-bottom: 5px;
    margin-left: -4px;
    padding-left: 30px;
    padding-top: 0;
    width: 202px;
}

Greatly appreciate any help or ideas, thanks. :)

EDIT: Just showing what I did to remove the positioning. I had just commented it out to see if it would at least expand, and work from there.

Upvotes: 0

Views: 1632

Answers (2)

Daedalus
Daedalus

Reputation: 7722

Adding display: inline-block; to .nav-drop-panel seemed to do the trick; I've also reduced the printed code slightly(margin-left, margin-top, etc reduced to margin: etc etc etc etc;). To see your unaltered, but working(as in just with the display: inline-block; added) version, click here.

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Absolutely-positioned elements are no longer part of the layout. The parent element has no idea where, or how large they are.

You need to use JavaScript to calculate all of this an adjust the size of the parent accordingly... or use a layout that doesn't use absolute positioning.

Upvotes: 1

Related Questions