html - css label and div on the same line -

html - css label and div on the same line -

this html

<div id="restaurantinformation"> <ul> <li> <label>logo</label> <div class="oneinfo"> <div class="fileupload-new thumbnail" > <img src="../img/logo_test.jpg" alt="profile avatar" style="width: 180px; height: 180px;"/> </div> </div> </li> <li> <label>username</label> <div class="oneinfo"> </div> </li> </ul> </div>

this css

#restaurantinformation{ position: relative; background-color: red; } #restaurantinformation ul li{ list-style: none; margin-bottom: 10px; } #restaurantinformation ul li label{ width: 20%; display: block; float: left; } #restaurantinformation ul li .oneinfo{ width: 60%; float: right; background-color: #066ecd; }

i tried create label , div on same line result this:

what missing wrong please?

i seek float left , right

and alter display block , inline-block result maintain image.

you seeing effects of floated elements beingness taken out of regular content flow.

you can maintain float interfering each other altering css follows:

#restaurantinformation ul li{ list-style: none; margin-bottom: 10px; overflow: auto; /* trigger new block formatting context */ }

adding overflow: auto create new block formatting context, means floated elements within li bounded edges of li block.

see demo at: http://jsfiddle.net/audetwebdesign/xd7au/

alternatively, can clear floats suggested earlier.

html css css3