How to position a fixed element in relation to a wrapper div using HTML and CSS

I need assistance with positioning the floating box on the right side of the window on this particular page.

My goal is to have this box relative to the white div containing all the text, so instead of it sticking to the window edge, it should float around 10-20px away from the content area.

CSS Code

#float-box {
position: fixed;
right: 10px;
top: 100px;

width: 150px;
padding: 10px 5px;
text-align: center;

background-color: #fff;

border: 5px solid rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

display: none;
}

.fb-1 {
height: 62px;
margin-bottom: 10px;
}

.fb-2 {
height: 60px;
margin-bottom: 10px;
}

.fb-3 {
height: 60px;
}

Any help would be greatly appreciated!

Answer №1

To properly display the social-float element, you should place it inside a wrapper div and adjust its style with right:-160px. This width of 160px along with an additional 10px margin is necessary for proper alignment. Also, remember to include position:relative in the CSS for #wrapper

Please update the CSS for social-float as follows:

position: fixed;
left: 50%;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color: white;
border: 5px solid rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
margin-left: 380px;

Answer №2

Why not try updating the style of your social-float id to the following:

#social-float {
    background-color: #FFFFFF;
    border: 5px solid rgba(180, 180, 180, 0.7);
    border-radius: 8px 8px 8px 8px;
    display: none;
    float: right;
    margin-left: 715px;
    padding: 10px 5px;
    position: fixed;
    text-align: center;
    top: 100px;
    width: 150px;
}

Answer №3

shift your div to the inside of #Wraper,

<div id="wrapper">


  <p>Curabitur id neque eget justo ultrices semper. Suspendisse eget sapien eros, sed dapibus justo. Fusce ullamcorper, felis vitae consequat malesuada, tortor metus mattis ligula, nec pellentesque nisl sapien vel velit. Sed augue sem, malesuada ut elementum dictum, blandit vitae lorem. Aliquam eu nulla neque, vitae feugiat tortor. In id augue nisl. Donec congue arcu vel mi semper sit amet porttitor tortor condimentum. Donec non eros tempor dolor bibendum venenatis. Donec ornare imperdiet leo, non venenatis odio mollis et. Suspendisse in sapien eu sapien egestas elementum.</p>
  <p>Sed cursus consequat euismod. Pellentesque sagittis, odio et luctus sagittis, tellus mauris malesuada leo, in tincidunt nisl urna ac urna. Morbi vestibulum faucibus elit vel volutpat. Aliquam erat volutpat. Donec posuere velit vitae risus mattis molestie. Curabitur posuere egestas justo, quis iaculis leo convallis ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tristique augue et leo consectetur in porttitor felis euismod. Aliquam ac mi condimentum arcu euismod molestie.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor adipiscing turpis, eu tristique tellus congue sit amet. In non ipsum risus. In hac habitasse platea dictumst. Sed eu mauris nulla. Ut vitae arcu urna, eu sodales enim. Curabitur porta elementum diam at adipiscing. Sed consectetur convallis neque, eu fermentum lectus mattis in. Ut tristique feugiat elementum. Quisque rutrum dui quis massa commodo id tempor dui vulputate.</p>
  <p>In nisi felis, venenatis at pellentesque et, bibendum eget justo. Sed imperdiet commodo rutrum. Proin massa felis, porttitor et commodo at, semper eu sapien. Curabitur eu neque libero. Proin consequat sagittis felis, ut ultricies orci auctor eget. Sed a vehicula risus. Vivamus nulla nisi, lobortis a semper nec, lobortis vel felis. Cras et sem magna, vel ullamcorper justo. Quisque volutpat massa eget leo blandit ultricies eget non nisl. Nunc vel lacus quis risus placerat consectetur vitae quis lectus. Nullam a ante ut nibh facilisis viverra. Nullam mollis, risus sit amet eleifend mattis, massa lorem tempor mauris, sed dictum nisl enim accumsan velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in faucibus enim. Nulla at mi orci, vel commodo felis. Donec ac tristique ante.</p>
  <p>Nunc eu tellus lectus. Vivamus tellus orci, scelerisque a gravida id, suscipit ut purus. Duis eu elit magna. Mauris quis tellus tellus. Fusce sed lorem in lectus aliquam cursus. Etiam orci lectus, fringilla sed imperdiet id, pharetra ut nisi. In hac habitasse platea dictumst. Vestibulum sed metus vel justo pulvinar vehicula ut lobortis mi. Cras viverra porta enim et malesuada. Quisque ullamcorper justo turpis, eu consequat ligula. Nam eget massa enim, in dictum felis. Nam cursus augue eu augue dignissim venenatis. Vestibulum in dignissim odio. Vivamus pulvinar, diam in tempor varius, tortor dolor tempus arcu, vel fringilla lectus eros at mi.</p>
**<div id="social-float" style="display: block; ">
    <div class="sf-twitter">
        Yo! Sign up fo' this!
    </div>

    <div class="sf-facebook">
        You know you want to!
    </div>

    <div class="sf-plusone">
        <a href="http://lulzdaily.com/no-im-not-drunk" target="_blank">Click Me, Por Favor!</a>

    </div>
</div>**
</div>

make use of the CSS below:

#social-float {
left: 1020px;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color: 
white;
border: 5px solid 
rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
radius: 8px;
display: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove underlining from a Custom Link when hovering over it

Is there a way to remove the blue underline from my custom donate button? I created it by going to Appearance -> Menus -> Custom Link. The issue is that this custom link (donate button) is inheriting the same CSS as the navigation menu items, which I ...

Is it possible to install non-root dependencies in node_modules using NPM?

The repository @superflycss/component-navbox contains the following list of dependencies: "devDependencies": { "@superflycss/component-body": "^1.0.1", "@superflycss/component-display": "^1.0.2", "@superflycss/component-header" ...

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: https://i.sstatic.net/suIVu.png However, I haven't been able to achieve the desired result with the following code: &l ...

How can one go about incorporating the feature "updating list upon clicking a label" on a webpage?

On my website, I currently display a comprehensive list of publications. However, I am looking to organize these publications by various research topics using labels. Ideally, when clicking on a specific label, only the papers related to that topic will be ...

Angular is unable to iterate through a collection of ElementRef instances

My list of ElementRef contains all my inputs, but adding listeners to them seems to indicate that textInputs is empty even though it's not. @ViewChildren('text_input') textInputs!: QueryList<ElementRef>; ngAfterViewInit(): void { ...

Having difficulty retrieving the Area and Range information in ChartJS

I am new to working with HTML5 and ChartJS. I have noticed two different types of declarations when attaching JS Chart Versions 1.0.1 and 2.1.1. Can you please provide some insight into this? Additionally, I am facing an issue where the stripes behind the ...

Customizing Row Background Color in Bootstrap

Currently working on a project www.codepen.io/anon/pen/yMmjZb The problem I am facing is with my 3rd row (the one with the 3 columns) where the background color is bleeding beyond the intended boundary. My suspicion is that it's due to the row span ...

Implement a delay for updating the style of a button by using the setTimeout function

Is it possible to create a button that, when clicked, changes color to green and then reverts back to its original style after 3 seconds? I am able to change the button color using an onClick event in my script. However, I encounter scope errors when tryi ...

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

The issue of a non-functional grid with scroll in a flexbox

I've encountered a problem while working with the grid layout using divs and flexbox. The header, which I want to be fixed, is overlapping with the first row and I'm struggling to get the scrolling behavior right. How can I address this issue? I ...

How can I adjust the border opacity in a React application?

Can we adjust the border color opacity in React when using a theme color that is imported? For example, if our CSS includes: borderBottomColor: theme.palette.primary.main and we are importing the theme with Material UI using makeStyles, is there a way to ...

What could be the reason that data-bs-placement="right" is not functioning as expected?

I am facing an issue with the popover functionality in my project. No matter what value I set for data-bs-placement attribute, it does not display correctly. Can you help me understand why this is happening? <!DOCTYPE html> <html lang="en ...

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

Clicking on the overlaying divs in the slideshow does not trigger any changes when clicked

My question is about the behavior of the href attribute in a fade-style animation. Even when different containers are visible, the href value remains constant. Below is the HTML code: <div id="teaserslider"> <ul> <li> ...

JavaScript is unable to make changes to the page once it has finished loading

I have implemented a JavaScript code that allows me to send messages in a chat interface: function sendMessageToChat(conversation, message) { $("#content").html(conversation + message); $(".current-msg").hide(); $(".current-msg").delay(500).fadeIn ...

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue. Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly. The application consists of 2 files: 1) index.htm: <!DOCTYPE htm ...

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

Explaining the precise measurements of font size in CSS

I recently started diving into the world of CSS and picked up a copy of Eric Meyer's 3rd edition of CSS: The Definitive Guide. While reading through his section on font sizes (page 107), I came across an interesting concept - that the font size deter ...

In Firefox, the scaling of svg masks is not functioning properly

Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE. Website: SVG File: CSS: -webkit-mask: url("../img/feelfilms-logo.svg#logo_mask"); mask ...

Achieving left alignment for Material-UI Radio buttons: Float them left

Click here to view the demo https://i.stack.imgur.com/Yt4ya.png Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Mater ...