How Should I Position This DIV?

HTML & CSS
1

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

2

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;

3

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

4

I will read up with the reference link.
That was really just an example, you can learn more about positioning at the SP reference. :wink:

5

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…

6

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

7

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;

[B]#content[/B] { 
width: 637px; 
[COLOR=Blue]float: right; 
margin-right: 31px;[/COLOR]
[COLOR=Blue]display:inline; /*fix ie6 double margin bug*/[/COLOR]
 }

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.

[B]#nav[/B] { 
[COLOR=Blue]width: 927px;[/COLOR] [COLOR=Red]/*980px*/[/COLOR]
height: 36px; 
margin: 0 0 0 [COLOR=Blue]53px;[/COLOR] 
padding: 0; 
list-style: none;
 overflow: hidden;
 }
8

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

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.


[B]#content h2[/B] {
    [COLOR=Red]/*display: block;*/[/COLOR]
   [COLOR=Red] /*width: 100%;*/[/COLOR]
    text-indent: -9999px;
    border-bottom: 1px solid #C1C1C1;
    margin: 0 0 [COLOR=Blue]10px[/COLOR] 0;
}
9

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?

10

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.


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

As long as you remove the 100% 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;
    [COLOR=Red]/*height: 1100px;*/[/COLOR]
    margin: 0px auto;
    padding-bottom: 0;
    position: relative;
}