Float divs horizontally - css

Question

I need help with css, I have this setup:
<div class="embedInner">
<div class="embed_code"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sapien. Quisque risus. Ut laoreet hendreri mi.</p></div>
<div class="copy"><p>COPY</p></div>
</div>
http://jsfiddle.net/h7u8J/11/
I want both child divs always to stay in single line, both left and right, and text in embed_code to be overflow:hidden and not to fall into new line, so if space become smaller than width of the parent div.

Answer 1

If you will provide certain width to the parent div and the embedded div, then you can achieve what you want.
.embedInner{
position:absolute;
/*background: #333;*/
width: 100%; // newly added
}
.embed_code{
float:left;
background: #333;
overflow:hidden;
width: 90%; // newly added
}
.embed_code p{
padding:5px;
margin:0;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.copy {
background: #ddd;
float:right;
}
.copy p{
padding:5px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
float:right;
}
Please check if it can help you. Thanks :)

Answer 2

i changed your code!
i think this is what you want! DEMO
CSS:
.embedInner{
display:inline-block;
position:relative;
width:100%;
/*background: #333;*/
}
.embed_code{
position:relative;
left:0;
width:90%;
display:inline-block;
float:left;
background: #333;
overflow:hidden;
}
.embed_code p{
padding:5px;
margin:0;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
display:inline-block;
white-space: nowrap;
}
.copy{
display:inline-block
background: #ddd;
float:right;
position:relative;
right:0;
width:10%;
background:green;
text-align:center;
}
.copy p{
padding:5px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
float:right;
}
HTML:
<div class="embedInner">
<div class="embed_code">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sapien. Quisque risus. Ut laoreet hendreri mi.
</p>
</div>
<div class="copy"><p>COPY</p></div>
</div>