Question

I don’t understand why these two examples behave differently. The objective of the HTML and CSS is simply to align the divs horisontally and let the last div (to the right) take up the remaining space (remaining width of container).

using specific id for right item:

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="right">last</div>
</div>  

using :last-child:

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#left:last-child {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="left">last</div>
</div>

Answer 1

You are using IDs incorrectly. An ID represents a unique element of a page. Try this:

HTML

<div class="list">
    <div>item 1</div>
    <div>item 2</div>
    <div>last</div>
</div> 

CSS

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    width: 100%;
    background-color: #00FF00;
}

Edit

Your #right example displayed differently because it was not inheriting float: left;. If you want to mimic that functionality, add float: none; to the CSS like so:

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    float: none;
    width: 100%;
    background-color: #00FF00;
}