Float elements from middle with width in % - html

Question

I'm trying to create a layout where two elements float next to eachother originating from the midddle.
I've managed to do this but only when the two floating elements have a fixed width.
http://jsfiddle.net/q7uey80L/3/
Does anyone know how to do the same setup with width: 300px; for elements .right and.left replaced with a percentage?
If I change the 300px to say 20%, the structure fails and the elements originate from the left in stead of from the middle.

Answer 1

It's not clear to me what you are trying to do but I suspect float is not the way. This feels like flexbox is going to be the solution.
.container {
border: solid blue 1px;
display:flex;
justify-content:center;
}
.right, .left {
width: 25%;
border: green solid 1px;
}
h1 {
margin: 0;
padding: 0;
}
.wrapper {
border: solid red 1px;
text-align: center;
}
.container {
border: solid blue 1px;
display: flex;
justify-content: center;
}
.right,
.left {
width: 25%;
border: green solid 1px;
}
.right {
text-align: left;
}
.left {
text-align: right;
}
.clear {
clear: both;
}
<div class="wrapper">
<h1>Top titel</h1>
<div class="container">
<div class="left">
Quisque viverra ac augue porta auctor. Fusce sollicitudin tellus risus, sit amet commodo felis tristique in.
<br/>Integer tempor ultricies eleifend. Vivamus id pretium dolor, vitae sagittis massa.
<br/>Pellentesque pulvinar neque interdum dolor pulvinar tempus. Nullam congue tempus dignissim.
</div>
<div class="right">
Vivamus massa lacus, dignissim ac accumsan non, lacinia in libero. Nullam tempor, velit nec fringilla feugiat, arcu libero viverra nibh, ullamcorper ultricies ante felis non risus.
<br/>Vivamus feugiat augue nec tellus sodales interdum. Suspendisse ac libero malesuada
</div>
<div class="clear"></div>
</div>
</div>

Answer 2

You need to have another div between the container and left/right divs. You can then give width as percentage, with margin: 0 auto on the container.
.right, .left {
border: green solid 1px;
float: left;
width: 45%;
}
<div class="container" >
<div style="width: 60%;margin: 0 auto;height: 200px">
<div class="left">
Quisque
</div>
<div class="right">
Vivamus
</div>
</div>
</div
check this out:
http://jsfiddle.net/z6s1ddnx/1/

Answer 3

Is this what you meant: https://jsfiddle.net/anjalysaju123/5pypkfky
the css is:
h1 {
margin: 0;
padding: 0;
}
.wrapper {
border: solid red 1px;
width: 100%;
height: 100%;
text-align: center;
}
.container {
border: solid blue 1px;
display: inline-block;
}
.right, .left {
border: green solid 1px;
float: left;
width: 49%;
}
.right {
text-align: left;
}
.left {
text-align: right;
}
.clear {
clear: both;
}

Answer 4

I think it is because of .container display is set to inline-block and it has no width set. If you set percentage for .left and .right - percentage are related to containeng element. Set .container width to exact value and you can set percentage width for inner elements. http://jsfiddle.net/q7uey80L/5/
.container {
border: solid blue 1px;
display: inline-block;
width: 500px;
}
.right, .left {
border: green solid 1px;
float: left;
width: 30%;
}