CSS: how to make bottom div width same as the width of image above?

Tags: css,dynamic,alignment

Problem :


How can I fix the width of the main <div> with the image on top, or make the width of the top image dynamic like the main <div>?

Solution :

I'm not sure what you're trying to accomplish, but I'd say you just have to use percentages as width. Something like this as HTML:

        <div id="wrapper">
            <img src="foo/bar.jpg" />
            <div id="content">

And this for CSS:

*, html, body {
    margin: 0px;
    padding: 0px;

#wrapper {
    width: 900px;
    margin: 0px auto;

img {
    width: 100%; //Sets the image width to 900px

#content {
    width: 100%; //Sets the content divs width to 900px

This is an answer to what I think the question is. If it's not, please do tell me.

    CSS Howto..

    How can I set one style to override another conflicting style in CSS?

    How to do a resizable link a:hover in CSS

    How to place two divs next to each other -HTML/CSS

    How to force enter key to make a line break inside iframe editor

    How to create new lines with less space HTML/CSS

    joomla, CSS - show joomla module only for smartphone screens

    How can I define styles for individual cells in a SharePoint 2007 topnav?

    How to make a img flicker using css(should work in all browsers)

    How to make a better transition of

    CSS border - how to populate content inside div with border

    how do you link static pages in rails to your css files? [closed]

    How to correctly apply the .clearfix:after class to HTML?

    How to know if an element's width is absolute or relative?

    In Ember how to use a view to change a css property and then view it?

    How to change a lot of img when hover

    GWT how to add css style on Image Resource

    CSS question - transparent underlined textbox - howto?

    how to repeat a small background image througout the page?

    How do I make this sprite behave how I want?

    How to change css elements in HAML dependent on what page is calling for the content?

    How to position two divs on the absolute front of a page, but with one over the other? CSS

    How do I apply a css padding to one element but not its child

    how to textalign in middle with css?

    How to make a HTML NavBar [closed]

    Fixed sidebar, content under it, how to fix?

    How to make elements appear one by one using css animation

    How this switch button work by CSS?

    How to dynamically set and modify CSS in JavaScript?

    How to extend a wrapped element background both left and right with different color?

    How to select the table heading of the first row in table using css selectors?