Make Div stretch with IE window

AlexW · February 25th, 2011, 06:10 PM

How can I get my MainContent div to stretch horizontally with the IE window? My CSS is as follows:

#PageWrapper
{
border-style: none;
border-color: inherit;
border-width: medium;
min-width: 990px;
height: 700px;
text-align: left;
margin-top: 0px;
border: none;
}

#Header
{
min-width: 990px;
height: 150px;
background-repeat:no-repeat;
}

#MenuSidebar
{
background-color: Gray;
width: 180px;
height: 500px;
float: left;
}

#MainContent
{
min-width: 630px;
min-height: 500px;
float: left;
}

#RightSidebar
{
width: 180px;
min-height: 500px;
float: left;
}

#Footer
{
min-width: 990px;
height: 50px;
text-align: center;
font-size: x-small;
float:right;
}

disel2010 · February 26th, 2011, 08:15 AM

Hi,

just add width:100%

Code:

 
#MainContent
{
    width:100%;
    min-width: 630px;
    min-height: 500px;
    float: left;
}

Hope this helps

AlexW · February 26th, 2011, 09:30 AM

This doesnt change anything, and changing width: 630px;
to min-width: 630px; moves the content out of place below all other divs.

disel2010 · February 26th, 2011, 09:37 AM

Then MainContent isn't your top container I guess?
Setting width:100% should stretch it except if it's contained within another container with a fixed width..

Can you post an example of how your html elements are nested?

disel2010 · February 28th, 2011, 09:24 AM

Hi Alex,

did it finally work out for you?

If not, try setting your body and html element to stretch to full width:

Code:

 
 html, body {
   width: 100%;
 }

If this doesn't work, please provide your markup code.

AlexW · February 28th, 2011, 10:05 AM

Hi disel,

This hasnt worked, I must be constricting it somewhere else. Perhaps I should not stretch the content page because of the header and footers?

disel2010 · February 28th, 2011, 10:46 AM

Hi Alex,

do you have Firefox and the Firebug add-on?

The Firebug is a great add-on to look at the HTML dom. I think if you look at the hierarchy of your containers there, you can spot the problem.

If you still have problems, please provide a stripped-out version your html markup.

AlexW · February 28th, 2011, 01:02 PM

Hi Disel,

I'm a little further with this; I have a content slider on the homepage that stops the movement when I take out. I have played with all the CSS and made sure that its well within the bounds of the main content div but the movement is still happening with this on my page.

I have body, then a PageWrapper Div, then a MainContent Div that contains my content placeholder as shown in my original posted CSS. Here is the CSS for the content slider:
#featured{
width:365px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
top: 0px;
left: 0px;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:215px;
}
#featured ul.ui-tabs-nav li{
padding:0px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:6px 5px;
background:#fff;
padding:0px;
border:0px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:60px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:62.5px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-nav-item a
{
text-decoration: none;
}
#featured li.ui-tabs-selected{
background:url('../ContentSlider/Images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('../ContentSlider/Images/transparent-bg.png');
}
#featured .info h2{
font-size:15px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
.HeadingLetterContentSlider
{
color: #FF3300;
font-size: large;
font-weight: 600;
}

Any ideas welcome...

disel2010 · March 1st, 2011, 08:43 AM

Hi Alex,

actually a wild guess but I believe you are working with asp.net webforms, isn't it?
Try specifying your width for the form too:

Code:

 
        form 
        {
            width:100%;
        }

Actually, if your html markup hierarchy is as follows

Code:

 
<html>
 <body>
  <form>
    <div id="PageWrapper">
     <div id="MainContent">
     .....

the width for html, body, form shouldn't even be specified (although it won't hurt).
Then it's only needed to at it to the styles for #Pagewrapper.