Making an Unordered List Span 100% The Width of a Div

Making an unordered list span 100% the width of a div

I think you have three options:

Use JavaScript to calculate the sizes
Use a table, as discussed in this question (this is actually not a bad option — it’s pure HTML and CSS

If you’re only targeting new browsers, you can use the new flexible box component of CSS (shown here with a couple of vendor prefixes):

ul{
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
}
li{
    list-style: none;
    list-style:none;
    text-align: center;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

Unordered list doesn't span whole of div

ul elements have a left padding by default.

Add padding: 0; or padding-left: 0; to .nav-container ul to avoid this

https://jsfiddle.net/ejzL9zo9/

CSS fixed width in a span

ul {  list-style-type: none;  padding-left: 0px;}
ul li span {  float: left;  width: 40px;}

<ul>  <li><span></span> The lazy dog.</li>  <li><span>AND</span> The lazy cat.</li>  <li><span>OR</span> The active goldfish.</li></ul>

Align ul and span to the extreme right of a enclosing div using css

I took a look at your sandbox and finally noticed that you were using the nav component twice in your div. I've never tried to use two navs within the same div before but I would assume that bootstrap is applying styling to them that makes it difficult to accomplish what you are trying to do. By eliminating one of the nav components and including both nav-items within the same nav, I believe I was able to apply styling to the overall nav element to accomplish what you are trying to do.

<div className="alignAmendFSBackContentsInSingleRow">
  <span className="angleLeftNavigateBack"></span>
  <Nav className="navFormatting">
    <NavItem>
      <StyledLink
        id="wizardPreviousButton"
        onClick={() => {
          this.previousButtonClick();
        }}
      >
        Back
      </StyledLink>
    </NavItem>
    <NavItem id="nextButtonNavItem">
      <NextButtonStyledLink id="wizardNextButton">
        Next
      </NextButtonStyledLink>
    </NavItem>
  </Nav>
  <span
    style={{ marginLeft: "auto" }}
    className="angleRightNavigateBack"
  ></span>
</div>

They styling in the styles.css file is below:

.App {
  font-family: sans-serif;
}

.navFormatting {
  display: flex;
  width: 100vw;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
  flex-direction: row;
  justify-content: space-between;
}

.angleRightNavigateBack::after {
  content: "\f105";
  font-family: "FontAwesome";
  font-size: medium;
}

.angleLeftNavigateBack::after {
  content: "\f104";
  font-family: "FontAwesome";
  font-size: medium;
}

.alignAmendFSBackContentsInSingleRow {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  height: 20px;
}

There are likely other methods out there that could accomplish what you are trying to do with two nav components but I hope this solution helps provide some guidance.

Image of modified code output on Sandbox

ol within ul and make certain list items extend to the width of parent element

Short Answer

Your HTML is somewhat more complicated than necessary and makes unorthodox use of list elements for things that aren't really lists. Simplifying it would make styling the page easier. I have done so in this jsFiddle, where I think your problems have been taken care of by absolutely positioning .cover and adding appropriate padding to .bookdetails: http://jsfiddle.net/7Xeb7/10/. (Edit: new jsfiddle reflects comments)

Long Answer

As much as possible, the HTML tags you use should be semantically-related to the content they represent. So use ul or ol for lists of things, use img for images, and use heading tags (h1, h2, etc.) for headings. There's no need to use tables here (which are generally frowned upon for layout since they violate this semantic logic). Here I've preserved your structure and CSS classes but used more logical tags:

    <div class="book">
        <img class="cover" src="" alt="Book Title Here" />
        <div class="bookdetail">
            <h2 class="title">Title</h2>
            <ol class="attributes">
                <li>
                    <span class="property">property</span> <!-- this span wasn't closed before! -->
                    <span class="button">btn</span></span>
                    <span class="value">value</span>
                </li>
                <li>
                    <span class="property">property</span>
                    <span class="value">value</span>
                </li>
            </ol>
        </div><!-- /.bookdetail -->
    </div><!-- /.book -->

Once the HTML has been cleaned up you can more easily make the necessary CSS changes. Your main issue is getting .bookdetail in the right place. It's hard at the moment because you're trying to balance a fixed-width element (.cover) with a variable-width element (.bookdetail) that you want to take up the whole of its container - except for the fixed-width element.

This can be solved fairly easily by absolutely positioning .cover, so it no longer has any effect on the positioning of other elements in .book. Then you can just set the padding of .bookdetail to 0 0 0 140px - which is automatically relative to the most recent parent element with a specified position, which I've made .book. So .bookdetail expands to fill book like you want, but the right padding (or margin, if you prefer) means that it doesn't overlap with the cover image.

I've also made a few other CSS changes, visible in the jsFiddle, to make .title display better and to accommodate my HTML changes, but they're not directly relevant to solving your main issue so I'll leave them there.

expanding a unordered list to browser width (html/css)

Try that inside resize handler

var windowWidth = $('#prodGrid').width();
var prodGridWidth = 165 + 5;
var numOfUnits =  windowWidth / prodGridWidth;
var width = windowWidth / Math.floor(numOfUnits)
$('#prodGrid li').css('width', width - 5 + 'px');

And sometimes you can get away with display: inline-block and text-align: justify, like

<html>
    <head>
        <style>
            .products { text-align: justify; height: 54px; overflow: hidden }
            .product { display: inline-block; width: 50px; height: 50px; border: 1px solid blue; margin: 1px }
        </style>
    </head>
    <body>
        <div class="products">
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
        </div>
    </body>
</html>

Making an Unordered List Span 100% The Width of a Div