So I have an unordered list like so: ``` Health, Safety and Security Getting started Communication Personal and people development Quality Equality, diversity and rights Clinical skills Additional materials Infection control Record keeping Confidentiality and consent Protecting vulnerable people Workplace safety and security Hand hygiene ``` ` ` may need to be wider than it's parent ` `. However the parent ` ` must have `position: relative;` as ` ` has `position: absolute`…

HTML/CSS: Child element wider than relatively positioned parent

css, html

Solution

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.

Problem

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/

Original source