CODEWITHSUNDEEP
htmlcss
George Reith
George Reith

Reputation: 13476

HTML/CSS: Child element wider than relatively positioned parent

So I have an unordered list like so:

<nav id="breadcrumbs">
        <a href="#" id="home"></a>
        <ul id="parent">
            <li><a href="#">Health, Safety and Security</a>
                <ul class="child">
                    <li><a href="#">Getting started</a></li>
                    <li><a href="#">Communication</a></li>
                    <li><a href="#">Personal and people development</a></li>
                    <li><a href="#">Quality</a></li>
                    <li><a href="#">Equality, diversity and rights</a></li>
                    <li><a href="#">Clinical skills</a></li>
                    <li><a href="#">Additional materials</a></li>
                </ul>
            </li>
            <li><a href="#">Infection control</a>
                <ul class="child">
                    <li><a href="#">Record keeping</a></li>
                    <li><a href="#">Confidentiality and consent</a></li>
                    <li><a href="#">Protecting vulnerable people</a></li>
                    <li><a href="#">Workplace safety and security</a></li>
                </ul>
            </li>
            <li><a href="#">Hand hygiene</a></li>
        </ul>
    </nav>

<ul class="child"> may need to be wider than it's parent <li>. However the parent <li> must have position: relative; as <ul class="child"> has position: absolute and takes a left value to be positioned against it's parent.

Here is the relevant CSS: 

#breadcrumbs ul#parent {
    height: 39px;
    width: 905px;
    float: right;
    position: relative;
    background: #f38630;
}

#breadcrumbs ul#parent li {
    position: relative;
    height: 39px;
    float: left;
    min-width: 1px; /* required to fix Opera bug */
    padding: 0 47px 0 15px;
    line-height: 39px;
}

#breadcrumbs ul#parent li a {
    display: block;
    height: 42px;
}

#breadcrumbs ul li a:hover {
    color: #ffffff;
    text-decoration: underline;
}

#breadcrumbs ul li a:visited {
    color: #ffffff;
}

#breadcrumbs ul#parent li ul {
    position: absolute;
    width: auto;
    left: -5px;
    top: 42px;
}

#breadcrumbs ul#parent li ul li {
    float: none;
    height: 25px;
    margin: 0 3px 3px 3px;
    padding: 0 15px;
    line-height: 25px;
}

I realise I can give <ul class="child"> a set width greater than it's parent, but I want it to be as wide as largest child and not fixed in size.

Does anyone know how this is possible?

A live example of the code in use can be found here: http://rcnhca.org.uk/sandbox/

Upvotes: 3

Views: 6253

Answers (3)

Ankit
Ankit

Reputation: 801

Change width from auto to 100%.

#breadcrumbs ul #parent li ul {
width: 100%;} /* Change this width to 100% */

Upvotes: 1

Rdpi
Rdpi

Reputation: 581

The absolute DIV will refer to the parents width..

I think the solution is by working on the <li> elements. If you want the text to be rendered correctly, try to add

white-space: nowrap;

on #breadcrumbs ul#parent li ul li

It will prevent the text to be rendered wrongly.

Upvotes: 6

John
John

Reputation: 163

#breadcrumbs ul #parent li ul {
margin-left: 0;
padding-left: 0;
top: 42px;
width: auto;}

#breadcrumbs ul#parent li {
float: left;
height: 39px;
line-height: 39px;
min-width: 1px;
position: relative;}

Upvotes: 0

Related Questions