How to make div's width fit content not window


Tags: html,css

Problem :

In the following code, how to make "#wrap" width fit its childs width, and not to limit to browser window bounds ?

HTML

<div id="wrap">WRAP
    <div id="menu">MENU</div>
    <div id="large-content">LARGE CONTENT</div>
</div>

CSS

#wrap{background: #eee;}
#large-content{background: #f1c40f; width: 1000px; height: 300px}
#menu{background: #2c3e50; width: 100%; height: 50px}

JSFIDDLE

https://jsfiddle.net/67egnpho/1/



Solution :

The childs width is 100% so currently it is fitting it.

Adding display: inline-block; will keep it inline with it's contents.

#wrap{background: #eee; display: inline-block;}

    CSS Howto..

    How to get Style From jQuery in angular2

    How can I align my adsense graphics?

    How to use different CSS opacity in a nested div? [duplicate]

    How to make a responsive div stick to page edge

    Ask Toolbar preventing Bootstrap Modal to show

    How to add a CSS class to an element using a jQuery Selector?

    How to style a tag for current div with css?

    CSS how to make an element fade in and then fade out?

    How to remove the gap between each list-item in an unordered list?

    how to design like this form in html

    How to center a div horizontally in a table using CSS

    How to use CSS attribute selector for an SVG element with namespaced attribute href?

    cannot figure out how to make text appear inside div after hover animation

    How to display a long link in multiple lines via CSS?

    How do i style a list within a list?

    How to use JS/Jquery to replaces repeated CSS styles - Nested List

    CSS - Superfish, how to float 4th level of dropdown

    Adding a description to a css image slideshow

    How to clean style sheets mess? [duplicate]

    How to align the wizard to the left and right sides?

    How to add a google map icon to this code?

    How to put banner in css?

    How do I set the width of inputs within a column in Twitter Bootstrap's grid system?

    How to show “next”, “previous” buttons on an image (on mouseover)?

    How to make your website works on a projector?

    How to add a third level to my CSS drop down menu

    how to test css(3) style property value support, repeat value support?

    how to animate “simple jquery filtering” by using css only

    I want to make a circle graph how to make it in javascript and css

    How do I swap triangle icons when doing expanding/collapsing divs with Javascript/CSS