How Should I Position This DIV?

[Todd Temple]

I am wanting the position the DIV #member to the top right of the banner and have it move with the rest of the site. As you can see with this link below, the DIV #member stays in place and doesn't move with the rest of the site.
LINK-
http://www.securehostserver.info/~msbclcc/test/


Here is an example of the position I am wanting that DIV to be in.
LINK-
http://www.securehostserver.info/msbc/


Thanks in advance to anyone who can help.

Todd

[Rayzur]

Hi Todd,
Since your #member div is absolute positioned it is positioning from the nearest positioned ancestor, the body element in your case.

Set position:relative; on your #wrapper div to establish it as the containing block for the AP #member div.

Since that member div is on the right side of the wrapper div you can just say right:0; instead of left:895px;

[Todd Temple]

That did the trick! I will read up with the reference link. Thank you so much.

[Rayzur]

I will read up with the reference link.

That was really just an example, you can learn more about positioning at the SP reference.

http://reference.sitepoint.com/css/position
http://reference.sitepoint.com/css/containingblock

[Todd Temple]

Rayzur, Can you take a peek at the image I have floating to the right with the class .floatRight? It appears correctly in Safari and IE8 but looks odd in IE7 and IE6? Any thoughts as to why?

LINK-
http://www.msbclc.com/test/

I also just noticed that my navigation bar (mustard yellow) is not fitting the exact width in IE6. It appears to be too long....

[RyanReese]

Hi, after the image that has .floatRight , wrap those elements in a <div> (give it a calss) and then give that element haslayout

[Rayzur]

I also just noticed that my navigation bar (mustard yellow) is not fitting the exact width in IE6. It appears to be too long....

Hi,
That's because the #content div is stretching the main wrapper due to a Double Margin Bug on the #content div. The fix is display:inline;

#content { 
width: 637px; 
float: right; 
margin-right: 31px;
display:inline; /*fix ie6 double margin bug*/
 }

EDIT:
The double margin bug was not causing the navbar problem but it still needs to be fixed.

The navbar problem is IE6 stretching the #nav due to the 53px left margin added to the 980px width. The #wrapper is 980px so the navbar hangs out.

#nav { 
width: 927px; /*980px*/
height: 36px; 
margin: 0 0 0 53px; 
padding: 0; 
list-style: none;
 overflow: hidden;
 }

[Rayzur]

To fix the first problem with the floated right image just remove the 100&#37; width from your h2, you added a 10px right margin and it exceeds the available space.

There is no need to add any new divs to the html .

It was the same problem that I mentioned above, you are not allowing for margins with your total widths. Block level elements are 100% by defaullt and you don't have to declare the width or display:block. As long as you don't set a width the browser will account for the margin.

#content h2 {
    /*display: block;*/
    /*width: 100%;*/
    text-indent: -9999px;
    border-bottom: 1px solid #C1C1C1;
    margin: 0 0 10px 0;
}

[Todd Temple]

EDIT:
The double margin bug was not causing the navbar problem but it still needs to be fixed.

Thanks for the edit! That did the trick. I really appreciate your help. Do you think I still need the clearfix class that Ryan Reese was referring to?

[Rayzur]

Thanks for the edit! That did the trick. I really appreciate your help. Do you think I still need the clearfix class that Ryan Reese was referring to?

Hi,
As I mentioned above there is no need for any new divs in the html. Ryan's suggestion was to wrap everything after the image in a div and set "haslayout" on it. The text would not wrap under your right image if you did that though. There was never anything mentioned about adding a "clearfix", your floats are being contained just fine. The overflow:hidden on your #main is taking care of float containment and the width there is giving haslayout to IE6/7 which will contain floats.

#main {
    background: #FFF url(../i/gfx_bkg_main.gif) repeat-y;
    width: 950px;/*IE6/7 haslayout = float containment*/
    padding: 0 15px 20px;
    overflow: hidden;/*float containment*/
    border-top: 20px solid #FFF;
    border-bottom: 20px solid #FFF;
}

As long as you remove the 100&#37; width on the #content h2 that I noted in my last post IE6/7 will be just fine.

I would remove the height from your wrapper div though, heights really should not be set on pages that need to expand with content.

#wrapper {
    width: 980px;
    /*height: 1100px;*/
    margin: 0px auto;
    padding-bottom: 0;
    position: relative;
}