Floating a block to the right then take full width after float - html

Question

I've got the following situation where I'd like the list on the right to use just the remaining space until it's passed the content on the left at which point it can take up the full width again.
I can get it done by hardcoding a margin-left: 50% for the first few <li> but this is inadequate since I don't know the text-wrapping div's dimensions.
.intro {
width: 50%;
float: left;
}
li {
display: block;
height: 50px;
border: 1px solid black;
}
<div class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Answer 1

I am assuming that you want the content of list items to be next to the floated content. You can accomplish this by using regular divs. Not sure as to why you are utilizing ul and li tags.
FAUX Solution:
Fiddle: http://jsfiddle.net/jebgerp8/.
HTML:
<div class="intro">
Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping
</div>
<div class = "li">
<img src = "http://placehold.it/50x50" />
</div>
<div class = "li">
<img src = "http://placehold.it/50x50/ff0000" />
</div>
<div class = "li">Another "list item"</div>
<div class = "li">Fourth "list item"</div>
<div class = "li">Last "list item"</div>
CSS:
.intro {
width: 50%;
float: left;
border: 2px dashed #bbb;
}
.li {
height: 50px;
margin: 2px 0;
}
.li:nth-last-of-type(-n + 3) {
border: 1px solid #000;
}
TRUE Adjustable Solution via Flexbox (requires modern browser).
Fiddle: http://jsfiddle.net/148y1b18/
CSS:
.intro {
width: 50%;
float: left;
border: 2px dashed #bbb;
}
.li {
height: 50px;
display: flex;
border: 1px solid #000;
}
.li + .li {
margin-top: 2px;
}

Answer 2

add this:
.list {
width:50%;
float:right;
}
Demonstration:
.intro {
width: 50%;
float: left;
}
.list {
width:50%;
float:right;
}
li {
display: block;
height: 50px;
border: 1px solid black;
}
<div class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</div>
<div class="list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Answer 3

I'm not sure what you were trying to do with the black border but if I have a little more information I could probably help out with that a bit more too.
Part of the problem you had with the list was that you left out your . in front of the li. Look at your css above. It was not taking on the elements that you had specified.
check out this js fiddle. I think it's what you are looking for, short of the border probably.
http://jsfiddle.net/j9pekyje/
<p class="intro">Some text and stuff and text and maybe some more text and donuts let's play high powered god mutant prototype<br>Some more text to illustrate obviouslycate some wrapping</p>
<ul>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
<li>hi i like pancakes</li>
</ul>
.intro {
width: 50%;
float: left;
}
.list {
width:50%;
float:right;
}
.li {
display: block;
height: 50px;
border: 1px solid black;
}
Just a heads up on this as well. You could potentially run into some issues with total being 100% with or without setting margin or padding because that is usually additive. Something to be aware of in the future. Hope this helps you.