page resize issue

[shah]

Hi,

i have a web page, which has the layout as the following.

 

There is a main division MainDiv which holds other two divisions header and menu as given by the following code.

 

<div class="MainDiv">Content for  class "MainDiv" Goes Her
                <div class="header">
                </div>
                <div class="menu">
                </div>
</div>

 

The CSS code for each style is given below.

 

.MainDiv {
width: 842px;
height: 800px;
background-color: #FFF;
position:absolute;
top:0px;
left:50%;
margin-left:-421px;
margin-bottom:20px;
}
.header {
height: 158px;
width: 842px;
background-color: #CCC;
position:absolute;
left:0px;
top:0px;
}
.menu {
height: 643px;
width: 200px;
background-color: #CCC;
position:absolute;
top:158px;
left:0px;
margin-bottom:20px;
text-align: left;
}

 

Now i have a couple of issues with this code.

 

1) When i resize the page, The division which holds menu disappears. I want a scrollbar there so that after the resizing, the user is able to see the full content of the page

 

2) I am placing another division in the menu division which holds some buttons. I am setting the text-align property of the menu division equal to center, so that the buttons are centralized in the menu division. The problem is that it is working in IE but not in firefox.

 

3) As you can see, i am putting some margin .i.e 20px in bottom property of the maindiv but the division is still extending till the end of the page. it is not leaving any margin to the bottom of the page.

 

 

I will appreciate if someone could help me in the above three issues. This is very urgent and i have to deliver the website to the client in a tight deadline.

 

Hoping to get lot of responses.

 

BR

Syed Shah

[Yesideez]

I'd be using ID and not CLASS

<div id="wrapper">
  <div id="header">
    title here
  </div>
  <div id="menu">
    menu here
  </div>
</div>

 

CSS...

#wrapper {
  width: 842px;
  margin: 0 auto;
}
#header {
  width: 842px;
  float: left;
}
#menu {
  width: 643px;
  float: left;
}

 

Something like that but change the CSS to suit your needs. If you download and install Firebug for Firefox you can edit the CSS live on the page instead of having to guess changes, apply and refresh the page each time.

[shah]

when i use margin:auto, it leaves some automatic top margin. i do not want any top margin. is there any solution to that?

Still when i resize the page, the menu div is hidden.

 

Any solution?

[Yesideez]

Parameters for margin:

margin: a;

Margin for top, right, bottom & left set.

 

margin: a b;

Margin a sets top & bottom, b sets left and right.

 

margin: a b c;

A=top, b=left & right, c=bottom

 

margin: a b c d;

A=top, b=right, c=bottom, d=left

 

So you'd need to use:

margin: 0 auto;

That sets top and bottom margin to 0 and the left and right margins to auto.

 

[shah]

hi,

Thanks for spending some of your precious time, solving my issues.

so if i use

margin:0 auto 10;

 

then it will mean that the division will be stretched to top leaving 20 pixels at the bottom and centralized horizontally right?. sadly it is not the case here. could you please suggest what could be the problem. my second problem is that when i resize the page, the menu disappears/hides. The more i reduce(restore down) the page, the more it hides. I will appreciate if you could solve this issue as well.

 

BR

Syed Arif Ullah Shah

[shah]

forum,

I have solved one issue. the problem was that to centralize the div horizontally i had used

left=50%
margin-left=-421px. 

 

because of the above code, when i tried to resize  the browser, it would hide the left section of the page. when i removed this code, the page is behaving normally now.

 

now my problem is that the above code was working fine to centralize the main wrapper horiznotally. Since i can not use this code any more, i will need an alternative code to get the same functionality. i had used

margin;0 auto;

but it is not working. any idea?

[shah]

HI yesideez,

Thanks a lot for your help and guidelines. Things seems to be working fine now. I am not sure why margin=0 auto; was not working before, but after restarting my pc, things have started working. Now i have some little issues which need to be solved.

 

1) when i use the margin=0 auto; the wrapper seems to be leaving some top margin although i have set the first parameter equal to zero which means that the wrapper should be starting from the page start and end at the bottom.

 

2) when i use the the following code

 

#wrapper {
  width: 842px;
  margin: 0 auto;
}
#header {
  width: 842px;
  float: left;
}
#menu {
  width: 643px;
  float: left;
}
#HomeMainContent{
width:522px;
height:300px;
background-color: #B8DAC2;
color: #000;
float:left;
}

The menu starts right at the left of the wrapper which is fine. then there is another division homeMainContent which holds some text. because i use float:left, it starts right after the menu. I want it to be centered in the remaining available space after the menu. Is it possible without using a fixed/absolute positioning like left:300px etc.

[shah]

could some one give me a link to a comprehensive tutorial which is using a complex wrapper and nested div with different positioning like different size divs within a div etc. I think i am missing something here and i might be able to find it out if i go through a comprehensive tutorial

[Yesideez]

Have a look at this - great resource.

 

http://css.maxdesign.com.au/floatutorial/