CSS - Fixed Position with Dynamic Width

Question

I have a "search" container with a fixed width. It has 2 children:

A "quantity" container that is anchored to the bottom right corner of the parent. It's width is dynamic, but should always be quite a bit smaller than the parent container.
A "breadcrumbs" container that displays the current search criteria. It's width can vary and even wrap.

I have managed to get this almost working, however there is an edge case where when "breadcrumbs" is a certain length, text from both child containers overlaps.

Below are some examples of how it should look and an example of how it is currently broken:

sample

And here is the HTML/CSS code:

<!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>
<style type="text/css">
.search {
    border: 1px solid blue;
    width: 600px;
    position: relative;
}
.breadcrumbs {
    border: 1px solid green;
}
.quantity {
    border: 1px solid red;
    position: absolute;
    right: 0;
    bottom: 0;
}
</style>
</head>
<body>
<b>Sample 1</b>
<div class="search">
    <div class="breadcrumbs">Search Criteria: Blah Search Filter 1 &gt; Blah Search Filter 2 &gt; Blah Search Filter 3</div>
    <div class="quantity">51-100 of 5000</div>
</div>
<b>Sample 2</b>
<div class="search">
    <div class="breadcrumbs">Search Criteria: Blah Search Filter 1 &gt; Blah Search Filter 2 &gt; Blah Search Filter 3 &gt; Blah Search Filter 4</div>
    <div class="quantity">51-100 of 5000</div>
</div>
<b>Broken Sample</b>
<div class="search">
    <div class="breadcrumbs">Search Criteria: Blah Search Filter 1 &gt; Blah Search Filter 2 &gt; Blah Search Filter 3 &gt; Uh Oh!</div>
    <div class="quantity">51-100 of 5000</div>
</div>

</body>
</html>

NOTE: If it is not possible to do exactly what am am requesting, below is a potential alternative:

Thanks for your help.

For the alternative you can just set .breadcrumbs to have width:500px or something, but @cimmanon has a good answer. — Belladonna
– Belladonna, Commented Dec 17, 2012 at 21:03
Making breadcrumbs fixed width may be the solution. I was hoping the widths could be left dynamic though as 1 - 5 of 5 is a different width compared to 100 - 110 of 1000. — dana
– dana, Commented Dec 17, 2012 at 21:20

cimmanon · Accepted Answer · 2012-12-17 21:27:29Z

2

Without needing to change your markup, this CSS will work:

.search {
    border: 1px solid blue;
    width: 600px;
    overflow: hidden;
}
.breadcrumbs {
    border: 1px solid green;
    display: inline;
}
.quantity {
    border: 1px solid red;
    float: right;
}

http://jsfiddle.net/mC5QG/ (minor modifications so you can see the full effect)

http://jsfiddle.net/mC5QG/2/ (added margin-top: -1px to .quantity)

Changed the absolute positioning to a float and set the first child element to display: inline. Should work no matter what width the element is.

Alternate solution to match alternative appearance:

.search {
    border: 1px solid blue;
    display: table-row;
}

.breadcrumbs, .quantity {
    display: table-cell;
}

.breadcrumbs {
    border: 1px solid green;
}
.quantity {
    border: 1px solid red;
    white-space: pre;
    vertical-align: bottom;
}

http://jsfiddle.net/mC5QG/1/

edited Dec 17, 2012 at 21:27

answered Dec 17, 2012 at 20:54

cimmanon

68.6k17 gold badges169 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Belladonna Over a year ago

Your JSFiddle link just goes to jsfiddle.com

cimmanon Over a year ago

Yeah, just realized I forgot to save it ^^;

dana Over a year ago

Thanks, this is definitely an improvement over what I have. However I would like to have both child div's anchored to the bottom of the parent container. There is a horizontal line under the parent container and it looks off if the bottom of the breadcrumbs container is not the same as the bottom of the quantity container. As an FYI, I am free to change the HTML markup as necessary.

cimmanon Over a year ago

In Opera (didn't examine other browsers), there's only a 1px difference in the baseline of the child elements. If removing the border is an option, then the 1px difference will be virtually unnoticeable. You could potentially correct it via line-height or by adding margin-top: -1px to .quantity.

Collectives™ on Stack Overflow

CSS - Fixed Position with Dynamic Width

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related