Home/ Questions/Q 7737731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:04:45+00:00

How can I make DIV width 100% (body width) with CSS? Currently, my div

  • 0

How can I make DIV width 100% (body width) with CSS? Currently, my div (.MainHeading) width is set as 100%, but it doesn’t display like 100% when the content width in another div is greater than the screen size. It just displays in top-left corner.

I’ve been searching for the solution for some time but I haven’t found it yet…

This is my CSS:

body 
{
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.MainHeading
{
margin: 0 auto;
background-color:Gray;
background-repeat:repeat-x;
height:auto;
min-height:93px;
width:100%;
}
.Body-Area
{
margin:0 auto;
overflow:visible;
width:950px;
max-width:950px;
height:100%;
min-height:395px;
}
.Container
{
display:table-row;
position:relative;
}
.Mid-Div
{
display:table-cell; 
position:relative;  
padding-left:2%;
padding-right:2%;
float:left; /*for IE 7 & 9 Compatible View*/
overflow-x:auto;/*for IE 8*/
vertical-align:top;
width:100%;
max-width:950px;    
overflow:hidden;
}

And here is my HTML code:

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div class="MainHeading">
    </div>
    <div class="Body-Area">
        <div class="Container">
            <div class="Mid-Div">
                 <img align="bottom" width="1224" vspace="1" lang="en"  hspace="1" height="332" border="1" src="images/cover2.png" alt="Test" id="imgtest" dir="ltr" />
            </div>
        </div>  
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve run this code and it seems to be fine. The heading div is 100% of the body, which in turn is the full width of the viewport.

    Update in reply to comment:

    I finally see now. You have a mistaken assumption, which is that the image is expanding the body. In fact, your body remains at 950px, even with min-width, because the image is not expanding it. So the 100% is actually correct.

    The problem isn’t the width setting, it’s the float on your Mid-div. Floating takes it out of layout, so the contents of that div are not pushing the page larger. You have to find a method that eliminates the float. You also have a max-width of 950, so if you want the body to grow, you have to get rid of that. Otherwise the image will simply clip. If clipping the image is acceptable, then perfect. 🙂

    My advice, and I’m sure it sucks to hear this, is to rethink your approach from the ground up. Adding a bit here and a bit there, subtracting something, changing a value… these are going to lead to a mess. The problem you want to solve should be very simple and require not too many rules… write some “requirements” (what must the page do, and under what circumstances) and then rewrite the CSS.

    In any event, here’s a “proof of concept” branch of sandeep’s fiddle without the float; the image is clipped rather than expanding body (due to min-width):

    http://jsfiddle.net/ZMWpW/1/

    • 0