Home/ Questions/Q 9006429
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T01:24:33+00:00

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

  • 0

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

  1. 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.
  2. 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: alternative

Thanks for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0