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 ?


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


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


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 not display common border between two adjacent divs?

    How to add font to web application .css file

    Zend_Form - add CSS Class :: How can I add css class to label in Zend_Form?

    How to create new div immediately next to image like on Facebook's news feed on right side of page?

    How to make images go inline vs break to a new line?

    How do you set JavaFX TabPane CSS in code?

    How to set align of elements to center with css?

    How to set my Django form on the center of the page

    How to align buttons below and right-aligned to a HTML list?

    How to identify device to make separate css for iPad and Galaxy Tab?

    How to create specified distance between the end of a line and the baseline of the second line using css

    How to apply pseudo-element styling to specific class only?

    how to center submenu under the parent `
  • `
  • how to position nested list items?

    How to speed up a slow loading PHP page that is processing several large arrays?

    How to align a label to the “BOTTOM” of a div in CSS?

    how to have a menu across top with links left aligned and right aligned

    How to repeat a code in html without writing the same code again and again

    How to squash a div vertically and keep element below 100% on screen

    how do you create tags like stackoverflow with text styling

    How can Shake FilePatterns be used to minify JS and CSS files?

    How to position a scroll box on top of an image using only inline CSS

    how to change style of a css element using jQuery

    How to hide or show correctly page element (with media query of pure css)?

    How to get divs and anchors stacked on top of each other with the same width

    How do I change the border lines COLOUR on the table view

    How to create a custom scrollbar on a div (Facebook style)

    How to push elements after absolute element

    How to display form output in the same page by hiding the form

    How do I apply CSS styling to a