Why does box4 push itself outside of box2, rather than simply stretching box2 out like text content inside of box2 would do? I've noticed that adding display: inline-block; works if I don't use float:right;, however when the float is added it acts as it does without inline-block added in... #newbox1 { background-color: pink; padding:5px; border: 1px solid red; width: 22%; margin: 12px auto; } #newbox2 { padding: 2px; background-color: orange; border: 1px dotted red; margin: 4px; } #newbox3 { padding-top: 33px; margin-top: 21px; } .newbox4 { border: 1px dashed blue; float:right; margin:12px; padding: 12px; } Code (markup): <div id="newbox1"> <div id="newbox2"> <span class="newbox4">box4</span> box2 </div> <div id="newbox3">box3</div> </div> Code (markup):
Correct me if I am wrong but I dont think you can use display:inline-block and float in the same instance, when an element is floated it is removed from the normal flow of the layout, so you cannot have a block element and float it at the same time. Just display it as an inline-block.
Parent elements are never to expand to contain floated elements. As noted, floated elements are removed from the normal flow. To get that box to expand to contain your float, add 'overflow:auto' to box2.
How would I accomplish this with css? (The main box being fluid, and having an inner box aligned on the right side, which if its size was changed it would increase the size of the box holding it)
Lol. Here is the code as it appears you didn't completely grasp what drhowarddrfine posted before. #newbox2 { overflow:auto; padding: 2px; background-color: orange; border: 1px dotted red; margin: 4px; } Code (markup):