Add a Div in the Master Page?

[erinep23]

How can I add a div in the Master Page that will cause the body proxy to float left and the content of the div to float right? By "how", I mean what are the proper CSS properties I need to add to the div? I am looking to add content that will be on every page, like an extra menu on the right side...

[kwag_myers]

For the CSS:

Code: Select all

div.rightmenu  {
    float: right;
} 

For the MasterPage, switch to Text Editor and add the div after <MadCap:bodyProxy>:

Code: Select all

<MadCap:bodyProxy />
<div class="rightmenu">		
        <MadCap:miniTocProxy /><!---or whatever menu, list, etc. you want-->
</div>
<MadCap:pageFooter>

Note that the menu is centered vertically. To force the div to the top of the page, you need to use the Position property instead.

[NorthEast]

If you want the topic body text to flow to the left of the right-floated div, just put the div before the body proxy.
You don't need to use a position property.

I'd also suggest setting a width on the div; e.g. width: 35%;

[erinep23]

Thank your for your replies, but that just made the topic float to the bottom ( I decided I wanted the menu on the right instead) See picture.

Do I need to put the body into its own div?

[NorthEast]

I'd guess that you haven't set a width on the floated element.

If you don't set a width on the floated element (except for images), then it's probably occupying the full width of the page, so the body text won't have room to flow around it.

[kwag_myers]

You have to put them in a list, e.g., a ul with a list-style-type of none. Or, use Dave's suggestion of setting the width to just a few pixels higher than the largest link image (which looks like about 205px). This forces the images to wrap within that set width.

One potential issue I see with your screen shot is the link images are different widths. If you set the width of the float or put them in a ul, it's going to look like this:

rightsidemenu.png

I think you probably want to make those all the same size.