div how to make its dimensions exactly as those of the contents


Tags: css,html

Problem :

How do I form a div to have the same dimensions as those of the content housed by it , and not any larger ?

The div that I currently has a larger width than that of the three divs that i have placed inside it.How can i get it to fit the inner div's size?

Here is the link to what i have now :: http://jsfiddle.net/jairajdesai/Fd5hQ/

HTML :

<div id="initial_options">
            <div class="option_button" id="option_1">
                <big>1</big> <span class="supplementary_text">text goes here</span>
            </div>
            <div class="option_button" id="option_2">
                <big>2</2></big> <span class="supplementary_text">text goes here</span>
            </div>
            <div class="option_button" id="option_3">
                <big>3</big> <span class="supplementary_text">text goes here</span>
            </div>
</div>

CSS :

#initial_options {
position:relative;
top:18%;
left:0;
z-index:10;
background-color:#eee;
}
.option_button{
width:20%;
border-radius:none;
}
#option_1{
background-color:#013adf;
}
#option_2{
background-color:#f7fe2e;
}
#option_3{
background-color:#ff0000;
}


Solution :

Inline element like <span> wraps around the content and more. Either you can use this or you can set the display property as inline.

div {
   display: inline;
}

However setting to display as inline will not give you any option to add top/bottom margin and padding. If you want to add that too, you should use inline-block as the property.

div {
    display: inline-block;
}

    CSS Howto..

    Why the space after the table, and how to remove it?

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    How do I apply CSS styles to Raphael.js objects using jQuery?

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to remove margin space around body or clear default css styles

    How to style (increase the height) of select box in CSS?

    How to adjust width of right-aligned navbar

    CSS - How to float correctly into pseudocolumns

    How is margin-top and margin-bottom getting added

    IE11: How to prevent sprite animating to correct co-ords

    How to make text invisable during hover stage

    How to make css layout to fit html content?

    how do I center this image, without touching the HTML

    How can I put my div “downloads” always 70px below my image

    Wordpress: How to add a caption right-aligned to the edge of the image

    Content shows up when clicked on the link

    How to make jQuery UI nav menu horizontal?

    How to apply IE Fixes for LESS CSS [closed]

    How to override display: table cell

    How can I style a disabled button in a Windows 8 JavaScript app?

    How to create an HTML CSS Page with Header, Footer and Content

    How to keep layout unchanged when keyboard is displayed?

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to get the click position on a page when a css zoom is involved

    How do I correctly position elements and lay out a page?

    How to set CSS width so that the element will have the exact window width?

    How to make triangle section separator [closed]

    how to crop big image in bootstrap carousel

    How to place Social media icons on right side of navbar

    How are styles within div's made 'safer' (i.e. so they do not override parent styles)