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

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 2

如果该div具有“绝对”位置，则应用css的“ left”属性。

Answer 3

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.