Div stretches only in one direction

Question

I created a doc page using Flare and forced breadcrumbs to stay fixed below the top nav. The page works as it is, but I want the div to stretch across the page. Please see current design below:

Click to see example screenshot

I can stretch the div to 100% if I remove the min-width in the child div, but it stretches only to the right, while keeping the breadcrumbs where I want. Example below:

Click to see example screenshot

Or I can make it stretch 100% by adding left:0; on the parent div, but then the breadcrumbs move out of place. I can use margin-right or right to position the div to desirable areas, but div does not sync with the rest of the content when resizing browser.

Answer 1

Thank you for your replies. Here are the html and css:

Html:

<div class="crumbs_wrapper">
 <div class="MCBreadcrumbsBox" >
  <span class="MCBreadcrumbsPrefix">You are here:</span>
  <a href="" class="MCBreadcrumbsLink">B1</a>
  <span class="MCBreadcrumbsDivider"> B2 </span>
  <a  href=""class="MCBreadcrumbsLink">B3</a>...
 </div>
</div>

CSS:

div.crumbs_wrapper
{  
 position: fixed;
    float: none;
    width: 100%;
    z-index: 1;
}

div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
    padding-top: 18px !important;
    padding-left: 10px !important;
    float: left;
    position: relative;
    margin-top: -12px;
    background-color: #FFF;
    z-index: 999;
    width: 100%;
    max-width: 104.5em;
    box-shadow: 1.5px 1.5px 15px #888888;
}

Th tool I use is Flare, which does not have the fixed breadcrumbs feature. Breadcrumbs are automatically generated; I only changed the CSS values and added an extra div with the .crumbs_wrapper class. Other classes are automatically generated by the software.

If I remove the max-width the div only stretches to the right, and if I add left: 0; to the parent div, the breadcrumbs move to the left. I can bring the breadcrumbs to the position where I want using margin, but it does not stay fixed when the browser is resized. Also, the paddings and margin-top are used to keep the breadcrumbs below the top nav and aligned with the rest of the content.

Answer 2

Try this:

*{ 
  padding:10px;
}
.parent {
  margin:auto;
  width:300px;
  background-color:red;
}
.breadcrums {
  background-color:blue;
}
.full-width {
  background-color: green;
  position:relative;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
}

<div class="parent">
    <div class="breadcrums">breadcrums</div>
    <div class="full-width">full-width element</div>
</div>

The important part here being position, width, left and transform on .full-width.

Answer 3

Applied the css " left " property if that div has "absolute" position.