Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Simple float div question

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 29, 2013 at 9:56 am #157394
    knowledgenotebook
    Participant

    Hi,

    I’d like to make the div with id of “f” float to right, my attempt of adding the attribute of float:right did not work, please advise. Thanks.

    Also, the floating function works.

    <head>
<style>
div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>

</head>

<body>
<a name="top">

<div id="f" class="floating-menu">
<a href="Help.html#top">Back to Top</a>
</div>

</body>
    November 29, 2013 at 10:01 am #157395
    Paulie_D
    Member

    We need a Codepen but you do realise that the div will be 100% of the width of the parent don’t you?

    So unless you set a specific width on it…you may not see anything happen.

    Also that HTML looks borked….you have unclosed a tags,

    November 29, 2013 at 10:03 am #157396
    Merri
    Participant

    Position fixed element can’t be floated.

    November 29, 2013 at 10:06 am #157397
    Paulie_D
    Member

    Position fixed element can’t be floated.

    Oh….and this.

    :)

    November 29, 2013 at 10:21 am #157402
    Paulie_D
    Member

    Codepen…..

    Then perhaps a better explanation of what it is you are trying to do.

    November 29, 2013 at 10:22 am #157403
    Merri
    Participant

    Give it position: fixed; and use right: 0; to set it to rightmost edge. You can also set other values like 10px to move it left.

    This does not float it right, but positions it to right. When you use position absolute, relative or fixed you can use left, top, right and bottom to move the element. You can also resize the element by giving both left and right or bottom and top.

    For example:

    .element {
  background: red;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

    Now .element covers the whole viewport (visible screen).

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.