how to i right float a div within a div?

Forum Moderators: not2easy

Message Too Old, No Replies

how to i right float a div within a div?

TheIceman5

11:54 pm on Dec 21, 2013 (gmt 0)

i am using dreamweaver, I am using this floating menu
[manos.malihu.gr...]
I have made it change from left of screen to right of screen but its hard up against the right margin.
I want it to not exceed the right hand side of the gridcontainer which I have at a set width.
how do I fix it?


<div class="gridContainer clearfix">
<div id="fl_menu">
  <div class="labelf1">MENU</div>
  <div class="menuf1">
    <a href="#" class="menu_item">An menu item</a>
    <a href="#" class="menu_item">A long menu item</a>
    <a href="#" class="menu_item">Item 3</a>
    <a href="#" class="menu_item">Another one</a>
    <a href="#" class="menu_item">A really, really long menu item</a>
    <a href="#" class="menu_item">Menu item 6</a>
    <a href="#" class="menu_item">And one more</a>
    <a href="#" class="menu_item">A tiny</a>
  </div>
</div>
</div>

lucy24

12:22 am on Dec 22, 2013 (gmt 0)

The key part, I think, is this:

#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}

position: absolute will override almost everything else having to do with positioning. If you want your element to fit inside another element, stick with position: relative --or, if possible, nothing at all. 99 times out of 100, position:static (the default) does what you want.

JD_Toims

12:39 am on Dec 22, 2013 (gmt 0)

To do what you're wanting, you'll need to use position:absolute or position:fixed and z-index: -- Fixed will eliminate the need to calculate the top position of the element and update it via jQuery, meaning the element will "stick where you put it" on a scroll, but you'll lose the "drop in after the scroll stops" [animation] effect you're getting from jQuery.

Note: Making sure the HTML for the menu is not contained within any other elements is easiest when using fixed or absolute positioning. Personally, I usually put nav menus like this that are repeated on each page of a site outside of "positioning containers" near the closed body tag, rather than "inline".

To calculate where the menu should be on a centered display you'll need to do things a bit differently wrt left: and margin-left: -- What you'll need to do is set the left: to the middle of the page, then use margin-left to change the position to the right of the middle. If you don't, your menu will change positions based on browser window size.

The following will move the menu so the left edge is 300px to the right from the center of the page, meaning if the menu is 150px wide the right edge will be 450px from the center of the page.

#fl_menu{position:absolute; top:50px; left:50%; margin-left:300px; z-index:9999; width:150px; height:50px;}

Added: If you're not using a centered display you can simply set the margin-left: to get the menu where you would like it -- No need to float:right.

TheIceman5

3:35 am on Dec 22, 2013 (gmt 0)

still cant get it working.
heres all my code if anyone can help, copy and paste into a html file and run it and it will work, but not the way I intend it to.

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://k-blogger.googlecode.com/files/JQuery.easing.1.3.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

#fl_cont{
width: 50%;
height: 50px;
min-width: 200px;
min-height: 50px;
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000000;
}
#fl_menu{
position:absolute; 
top:0px; 
right: 0;
z-index:999; 
width:150px; 
height:50px;
}

#fl_menu .labelf1{
padding-left:20px; 
line-height:50px; 
font-family:"Arial Black", Arial, Helvetica, sans-serif; 
font-size:14px; 
font-weight:bold; 
background:#000; 
color:#fff; 
letter-spacing:7px;
}

#fl_menu .menuf1{
display:none;
}

#fl_menu .menuf1 .menu_item{
display:block; 
background:#000; 
color:#bbb; 
border-top:1px 
solid #333; 
padding:10px 20px; 
font-family:Arial, Helvetica, sans-serif; font-size:12px; 
text-decoration:none;
}

#fl_menu .menuf1 a.menu_item:hover{
background:#333; 
color:#fff;
}

</style>
</head>

<body>
<div id="fl_cont">
<div id="fl_menu">
 <div class="labelf1">MENU</div>
 <div class="menuf1">
  <a href="#" class="menu_item">An menu item</a>
  <a href="#" class="menu_item">A long menu item</a>
  <a href="#" class="menu_item">Item 3</a>
  <a href="#" class="menu_item">Another one</a>
  <a href="#" class="menu_item">A really, really long menu item</a>
  <a href="#" class="menu_item">Menu item 6</a>
  <a href="#" class="menu_item">And one more</a>
  <a href="#" class="menu_item">A tiny</a>
 </div>
</div> 
<p>i do not want this menu to go outside of this containers right hand margin. </p>
<p>i also want this menu to float when yo move the page like it does now, scroll down youll see it slowly catch up.</p>
<p>&nbsp;</p><p>&nbsp;</p><p>das</p><p>da</p><p>sd</p><p>asd</p><p>sa</p><p>d</p><p>sad</p><p>s</p><p>d</p><p>sd</p><p>sd</p><p>d</p><p>s</p><p>d</p><p>sd</p><p>d</p><p>d</p><p>&nbsp;</p>
</div> </div>
<script>

//config floating menu
$float_speed=10000; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=1.0;
 
//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menuf1");
$fl_menu_label=$("#fl_menu .labelf1");
 
$(window).load(function() {
 menuPosition=$('#fl_menu').position().top;
 FloatMenu();
 $fl_menu.hover(
  function(){ //mouse over
   $fl_menu_label.fadeTo($menu_fade_speed, 1);
   $fl_menu_menu.fadeIn($menu_fade_speed);
  },
  function(){ //mouse out
   $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
   $fl_menu_menu.fadeOut($menu_fade_speed);
  }
 );
});
 
$(window).scroll(function () {
 FloatMenu();
});
 
function FloatMenu(){
 var scrollAmount=$(document).scrollTop();
 var newPosition=menuPosition+scrollAmount;
 if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
  $fl_menu.css("top",menuPosition);
 } else {
  $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
 }
}


 </script>
</body>
</html>

JD_Toims

7:06 am on Dec 22, 2013 (gmt 0)

Below works exactly as coded -- The position of the menu is at top:0; right:0; when I copy and paste the code, which is exactly where it should be according to the following.

#fl_menu{
position:absolute;
top:0px;
right: 0;
z-index:999;
width:150px;
height:50px;
}

Below works exactly as coded + the way you want it to -- The position of the box is at top:0; left:50%; margin-left:200px; meaning the right edge of the box is 350px from the center of the screen -- Adjust where it is l/r by changing the left margin.

#fl_menu{
position:absolute;
top:0px;
left: 50%;
margin-left:200px;
z-index:999;
width:150px;
height:50px;
}

See above for why I coded the second quote the way I did.

TheIceman5

7:35 am on Dec 22, 2013 (gmt 0)

it is getting closer but still not quite right. resize the browser and it starts moving out of whack.
is it even possible to get the menu to stay static on the right hand border of that container when the browser is resized and make it be able to move up and down as you scroll as well?

JD_Toims

7:45 am on Dec 22, 2013 (gmt 0)

top:0px;
right:24%;

Is probably as close as you're going to get without repositioning via js/jQuery -- Personally, I wouldn't bother with getting closer, but of course I wouldn't build a site that flexes to considerably smaller than the lowest resolution on a mobile screen that's not completely obsolete and will also flex to 50% of the widest resolution monitor anytime someone views it in full-screen either -- I'd definitely have more "restrictive" width constraints.

I should probably add: Right:N% or left:N% can be used in the case of a flexible-width centered page. Which is better depends on which direction the "movement" is desired on a resize, because the item will change relative positions a bit with either -- They cannot be used not in a fixed-width centered page to achieve the desired result.

TheIceman5

11:21 pm on Dec 22, 2013 (gmt 0)

here we go, all fixed now. couple of changes to

#fl_cont{
position: relative;
width: 50%;
height: 50px;
min-width: 200px;
min-height: 50px;
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000000;
}

#fl_menu{
float:right;
z-index:999;
width:150px;
height:50px;
position:relative;
}

thanks everyone for your help on this.