CSS/Window Resize

Vedder · 28 Mar 2007 at 19:05

I have the job of updating the website for work. It is a simple affair with the following:

Header
Navigation
SideBar | Content

As it was done in something like 1999 with tables-o-rama I have decided to start the layout from scratch in CSS. This has all turned out well and I have tested it on IE6, IE7 and Firefox and it all looks fine. However whenever I change the window from full size I get things like:

When what I really want is the sidebar and the content divs to know their role and stay still like so:

I posted on here before about similar and that time i was using absolute positioning instead of relative, however this does not work for me. Below is the CSS for the two divs:

Code:

/*These are the properies for the side bar on the site*/
#SideBar
{
    width: 15%;
    height: 750px;
    background-color:White;
    float:left;
    border-right: 1px dotted #CCC;
    border-bottom: 1px dotted #CCC;
    
}

/*These are the properties for the main content window*/
#MainContent
{
    float:right;
    width: 84%;
    height: 750px;
    background-color:White;
    
    
}

Also as they want the webpage to take up all of the viewable width so is setting percentages the way to go? Any help appreciated on this one.

psyr33n · 28 Mar 2007 at 20:16

Change from % to px. Depending on the desired effect, you could also use max-width, but IE6 doesn't understand it, so...

Code:

/*These are the properies for the side bar on the site*/
#SideBar
{
    width: howeverWideYouWantItpx;
    height: 750px;
    background-color:White;
    float:left;
    border-right: 1px dotted #CCC;
    border-bottom: 1px dotted #CCC;
    
}

/*These are the properties for the main content window*/
#MainContent
{
    float:right;
    height: 750px;
    background-color:White;
    
    
}

Vedder · 28 Mar 2007 at 20:52

Thats sorted the problem but in Mozilla the text from the main content pane wont seem to move from under the sidebar. This has got to be something obvious hasn't it?

psyr33n · 28 Mar 2007 at 22:21

Code:

/*These are the properties for the main content window*/
#MainContent
{
    height: 750px;
    background-color:White;
    margin-left: howeverWideTheSideBarIspx;
}