CODEWITHSUNDEEP
htmlcss
Jacques
Jacques

Reputation: 7135

Outer DIV not stretching full WIDTH of screen although inner DIV does

There are similar questions on stack with some suggested answers (some don't work in IE7 like settings display:table), others don't have answers so I'm hoping someone can explain why browsers render the following HTML as they do and what the proper approach is.

You can see the working sample at the following fiddle: http://jsfiddle.net/wDeCg/1/

The HTML:

<div class="bottom-background-image">
    <div class="site-width">asdfasdfasdf</div>
</div>

The CSS: 

body {
    background-color:beige;
    margin: 0;
}
.bottom-background-image {
    background-color:green;
}
.site-width {
    margin: 0 auto;
    width: 1024px;
}

Here's the unwanted result, which is that the parent DIV with a green background doesn't stretch the full width as expected. It seems to only take up the available screen width. Since the inner DIV is setting the width surely the outer DIV with no explicit width set should adopt the inner DIVs width? :

enter image description here

Similar questions:

DIV background not stretching properly

Stretch parent node to its content width

Upvotes: 0

Views: 2140

Answers (3)

Abhishek Jain
Abhishek Jain

Reputation: 2607

Try this:

body {
    background-color:beige;
    margin: 0;
    width:100%;
}
.bottom-background-image {
    background-color:green;
    width:100%;
    clear:both;
    overflow:auto;
}
.site-width {
    margin: 0 auto;
    width: 1024px;
}

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/wDeCg/3/

.bottom-background-image {
    background-color:green;
    min-width:1024px;
}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

Define your css in you body min-width:1024px;

body{min-width: 1024px;}

Demo

Upvotes: 2

Related Questions