HTML List Element: Sharing The Parent Width into Equal Parts

HTML List element : Sharing the parent width into equal parts

Try this: http://jsfiddle.net/QzYAr/

For details on display: table-cell: Is there a disadvantage of using `display:table-cell`on divs?
table-layout: fixed ensures equal width li elements.

CSS:

ol {
    width: 400px;
    /*width: 800px;*/

    display: table;
    table-layout: fixed; /* the magic dust that ensures equal width */
    background: #ccc
}
ol > li {
    display: table-cell;
    border: 1px dashed red;
    text-align: center
}

HTML:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

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.

Divide Width of Element Between Child Divs With CSS

You can use display:table-cell on your inner divs to do this. For the browser to make the inner divs behave like table cells, it also needs two layers of containing elements: one to acts as the table, and another to act as the table-row.

For a structure like this:

   <div class="outer">
       <div class="middle">
          <div class="inner">Item 1</div> 
          <div class="inner">Item 2</div> 
          <div class="inner">Item 3</div> 
          <div class="inner">Item 4</div> 
       </div>
   </div>

Use this CSS:

div.outer {display:table;}
div.middle {display:table-row;}
div.inner {display:table-cell;}

A nice structure to use is a UL wrapped in a DIV: the DIV acts as a table, the UL as a row, and the LI's as table-cells.

This technique is not well supported in older browsers - for anything older than IE8, you're out of luck entirely.

Let me know if you need more sample code than that!

Split divs by width to fill parent div

You're putting some extra " in there - after inline-block. Also take into account that line endings add an extra space, so your containers' total width would be 33% + 33% + 33% + 2 extra spaces.

You might want to try using display: flex;

<style>
.progressPercent {
    color: #000!important;
    background-color: green!important;
    border-radius: 0.5px;
    text-align: right;
    height:100%;
    font-weight: bolder;
}
</style>
<div style="display: flex;">
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>  
</div>

I'm using calc( 100% / 3 ) as it's more accurate than using 33% tree times, which is 1% short of 100%.

Getting Parent div's width to equal widest Child element/div

The problem does lie with the SVG. The attribute must be defined within the HTML tag inline, not by CSS. This seems weird, but by setting the SVG attributes here, JQ-UI will then adjust the SVG property here, but if there wasn't one to begin with, the browser determines its original dimensions.

<div> //container
  <div> //list of each element
    <div> // element 1
      <svg width="300px" height="100px"></svg>
    </div>
    ....

Auto resize child divs so they equally share width of parent

Use display: table (and table-layout: fixed with fixed width for container if you need equal-width columns) for container and display: table-cell for child elements.

li elements with adapted width

It is possible with CSS3 flex boxes, as demonstrated in this fiddle (for webkit browsers only). There are other browser custom properties that would make this work for recent versions of Firefox and IE. If you need something that works for Opera or older versions of IE then there is a JavaScript library called Flexie which might work.

Credit to The CSS3 Flexible Box Layout (flexbox) for the information on the browser support.

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

CSS

ul {
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack:justify;
    width:200px;
}

li {
    -webkit-box-flex:1;
    border:1px dashed grey;
    text-align:center;
}

Allocate equal width to child elements with css

Assuming the following sample markup:

<div class="wpr">
    <div></div>
    <div></div>
    <div></div>
</div>

Solution #1 - Flexbox

.wpr {  display: flex;  width: 400px;}
.wpr div {  flex: 1 1 0;  border: 1px solid yellow;  background: pink;  text-align: center;  min-height: 40px;}

<div class="wpr">  <div></div>  <div></div>  <div></div></div>
<div class="wpr">  <div></div>  <div></div></div>
<div class="wpr">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

HTML List Element: Sharing The Parent Width into Equal Parts