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 hide certain table column in a HTML table using CSS

    How to emulate Google greyed-out suggested text in input element?

    How can I stop the submit button from stacking under the text field on a bootstrap form?

    How to make information appear only when hovered over using jquery and css?

    How do I target a div without a class or id but with all these specific style-attributes

    How to create horizontal funnel like this? [closed]

    How to rotate multiple words with CSS?

    How do I change the css so lowering one class does not lower the other?

    How can I simply add a css file to change the background color for my shiny app

    Only show text on image when you hover - wordpress theme

    how to create two columns with div and CSS

    How do I get a link to ignore hover on mouseover?

    how to stop css/jquery rotation

    How is the “travel mode” menu in Google Maps implemented?

    how to position two transparent images to overlap opposite corners of a container div

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    How to keep CSS class on menu item with dropdown

    How to apply CSS to Selected One in Meteor?

    how to properly resize navbar fixed in bootstrap

    How do I align my radio button with associated text?

    How to calculate total size of all css,js and html pages separately uing shell script?

    how to Put a img and text middle of a div

    How can I add a border to the right side of this object?

    How to auto adjust parent DIV height according to the contents in child DIV?

    CSS - how to style a footer

    Span tag is shown as text in Drupal Bootstrap subtheme

    How to chose which CSS rule to use from multiple style sheets

    How can I control the height of an Option element in Webkit?

    How do i create a responsive page with fixed positioned header and side nav using only html css?

    How to add a disabled internal Style node to HTML5 DOM?