html - A variable width div to hold paragraph elements? -
here first attempt:
<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 © 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
Post a Comment