how to make body tag elastic?


Tags: css

Problem :

<body>
<div id="div01"></div>
<div id="div02"></div>
<img id="img01" src="...">
</body>

css

body{
width:90%;
margin:0 auto;
background-color:gold;
}

div01, div02 and img01 are 100px, 200px and 300px width, respectively.

The width of body's children is dynamically changed.

How can I set elastic width of the body, according to largest child ? Without using javascript, just pure css.

For example, if img01 becomes 250px body should be 250px. If div01 becomes 400px body should be 400px. And still staying horizontally centered.



Solution :

I'd recommend against using the <body> as a variable width element - the standard method is a wrapper <div>. For example:

<body>
  <div id="wrap">
    <img src="http://placehold.it/300x200" />
    <img src="http://placehold.it/200x300" />
    <img src="http://placehold.it/400x100" />
    [ other variable width content ]
  </div>
</body>

and the CSS

body{
    text-align:center;
}
#wrap{
    display:inline-block;
}

http://jsfiddle.net/daCrosby/Teq6N/


    CSS Howto..

    How can I stop a css background resizing to fit the browser window?

    Different JEditorPanes show html content, using the same css rules

    How to style multiple instances differently of the same jquery control?

    How to ensure CSS :hover is applied to dynamically added element

    Showing an hidden element with an opacity-animation

    How to float: top?

    How to center menu css

    How can I center div, inside other div with bootstrap classes?

    How do I sort css selectors with vim?

    How Do I set this PHP printed HTML form to stay within

    tags?

    how to fix a display difference between chrome and firefox for css relative position?

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    SMACSS and BEM: How to position Module inside of a Module?

    How to create a multiple columns with HTML CSS

    How to use a global parent selector with CSS Modules

    How to Protect an HTML element from it's respective assigned CSS

    How can I toggle a div to reveal content with CSS

    how to show element if visible in view-port with jQuery? (UPDATE)

    How to extract the text between two spans with lxml (or BeautifulSoup)?

    How to make child element width 30 precent of parent elements width using css?

    How to convert table with merged cells to responsive design?

    How to find the css, color codes and other coding a site uses

    How to align image to the right?

    html web shows header only in mobile view

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    How to make an svg masked image compatible with Internet Explorer

    JavaScript how to get this html to read this css and organise my script into the table

    How can I override an external css?

    In css how to joining two div classes without space? [closed]