Let's start with this:
<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;
}
Currently, the width extends across the entire window.
Is there a way to make the width adjust based on the number of p tags within the holding div?
I'm looking for the div width to be flexible based on its content.
Here is the actual code snippet in use:
/***************************************************************************************************
**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>