html - A variable width div to hold paragraph elements? -


here first attempt:

http://jsfiddle.net/nqaqb/6

<div id = 'hold'>     <p class='item'>men1</p>     <p class='item'>men2</p>     <p class='item'>men3</p> </div>  #hold{   background: #ff0000;   width: auto; } .item{     display:inline;     margin-left: 20px; } 

however width covers whole window.

how can have width expand , contract, depending upon how many p tags in holding div.

i want div width vary inside content.

production code:

/*************************************************************************************************** **media control ** */   #mi_control{   position:  absolute;   top:  660px;   display: inline;   border: 1px dotted #aaaaaa;   padding-top: 5px;   padding-bottom: 5px;   width: 400px;   border-radius: 5px; }  .menu_bottom{   font-family:  "lucida grande", verdana, arial, "bitstream vera sans", sans-serif;   font-size:  12px;   color:  #000000;   margin-left:    20px;   margin-left:    20px;   display: inline; }  .menu_bottom:hover{     cursor: pointer }  <!--media_control - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->   <div id="mi_control">   <p id="mi_cover_l" class="menu_bottom">foo &copy; 2013</p>   <p id="mi_about_l" class="menu_bottom">how</p>   <p id="mi_privacy_l" class="menu_bottom">privacy</p>   <p id="mi_team_l" class="menu_bottom">team</p>   <p id="mi_arc_l" class="menu_bottom">source</p> </div>  

i think after can accomplished adding following css div.

display: inline-block; 

so end with

#hold{   background: #ff0000;   width: auto;   display: inline-block; } 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -