Float Div right against a Div that is Always Centered? - html

Question

I want to have yellow div be centered in the blue div always (taking up only as much space as the text inside it), and then have the purple div float right into the yellow div, so it would basically be right aligned to the yellow div.
I think this is possible through CSS and maybe flex layout but I haven't nailed it yet
Here is the basic fiddle http://jsfiddle.net/AFzpp/
Here is the result I'm hoping for http://www.screencast.com/t/RFw7xMPy8
<div id="body">
<div id="column">
<div id="chicken">fun</div>
<div id="text"><p>test</p></div>
</div>
</div>

Answer 1

You can do this pretty simply.
Just get rid of your #text's width attribute and add text-align:center; to your #column.
http://jsfiddle.net/TannerJohnson/ypnrA/

Answer 2

http://jsfiddle.net/AFzpp/2/
text-align :center;
to make div yellow and blue center. and use
display:inline-block
to fit your div with text content

Answer 3

you may use inline-block display, text-align to center your containers and add a negative margin to the one you want to be aside. Negative margin virtually reduces width or space needed.
example : http://codepen.io/gc-nomade/pen/qeCGh
(this is a fork of http://codepen.io/gc-nomade/details/wqbjl )
<div>
<div>
</div>
<div>
</div>
</div>
div {
width:80%;
min-width:750px;
margin:auto;
background-color:green;
background-image:linear-gradient(to left, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0.2) 50%);/* this to show where middle stands */
}
div div {
display:inline-block;
min-width:1%;/* reset */
vertical-align:top;
width:30%;
min-height:200px;/* cause example has no content */
padding:5px;
background:#0871B2;
margin: 1%;
font-size:14px;
font-size:1.6vw;
text-align:left;
color:white;
text-shadow:0 0 1px black;
font-weight:bold;
}
div {
text-align:center;
}
div div:first-of-type {
margin-left:-11%;/* reduce virtually width or horizontal space needed close to zero */
width:10%;
min-height:50px;/* reset */
background:purple;
}
div div:first-of-type:before {
content:'on left middle side';
}