I have a query regarding positioning and variable width. I've applied the following CSS:
*{
border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/
}
By adding this to all elements, I can visualize their positions as mentioned in the code comment. However, I noticed that the default width for every element is set to 100%. I am interested in setting a variable width instead of a fixed width on the same line. This way, when I append more content to an element or container, I won't have to constantly adjust the fixed width and rearrange elements to align it properly. For instance, take my footer section:
<div class="footer">
<p id="copyright">© 2013 Jaime Penzellna</p>
<!--SOCIAL MEDIA-->
<ul id="social_media">
<li>Facebook</li>
<li>Instagram</li>
<li>LinkedIn</li>
<li>Codecademy</li>
<li>Flickr</li>
</ul>
</div>
Currently, the social_media ul tag and the copyright p tag are on separate lines with a 100% width each. What I aim to achieve is to place both the p and ul elements on the same line without utilizing fixed width, but a variable width that dynamically adjusts based on the added or removed text. Can anyone guide me on how to accomplish this? Thank you!