Is it possible for an absolutely positioned element to have floating elements wrapping around it?

Within my content box (#left-home-content), I have a series of paragraphs followed by a link in a <span> tag (.read-more-link), and then a <div> tag (#left-home-spread) that needs to be positioned absolutely at the bottom of the box. This may seem simple, but here's the catch - I want the paragraphs to wrap around this <div>. Below is the CSS code:

/* @group Left upper home content */

#left-home-content-container {
    background-image: url(/dev/images/bg-primary-content.png);
    height: 273px;
    padding-top: 30px;
    margin-top: -15px;
    margin-left: 31px;
    position: relative;
    float: left;
}

#left-home-content {
    width: 590px;
    height: 240px;
}

#left-home-content h3 {
    font: normal 20px/1.2 AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
    color: #e2876a;
    margin-bottom: 6px;
    font-size-adjust: 0.47;
}

#left-home-content p {
    line-height: 1.6;
    margin-bottom: .6em;
}

.read-more-link {
    display: block;
    font-family: AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
    font-size-adjust: 0.47;
    font-weight: normal;
    font-style: normal;
    margin-top: 12px;
}

#left-home-content .read-more-link {
    margin-top: 12px;
}

#left-home-spread {
    position: absolute;
    bottom: 34px;
    right: 34px;
}

/* @group Spread the word */

.spread-the-word {
    background: url(/dev/images/bg-spread.png) no-repeat;
    width: 260px;
    height: 31px;
    padding-top: 17px;
    padding-left: 15px;
       -moz-border-radius: 10px; /* FF1+ */
    -webkit-border-radius: 10px; /* Saf3-4 */
            border-radius: 10px; /* Opera 10.5, IE 9, Saf5, Chrome */
            box-shadow: 0 0 5px rgba(86,86,86,0.25);
       -moz-box-shadow: 0 0 5px rgba(86,86,86,0.25);
    -webkit-box-shadow: 0 0 5px rgba(86,86,86,0.25);
}

.spread-the-word ul {
    float: left;
    margin: -7px 0 0 8px;
    width: 115px;
}

.spread-the-word li {
    float: left;
    list-style: none;
    width: 28px;
    height: 28px;
    margin: 0 12px 0 0;
}

.spread-the-word .last-item {
    margin-right: 0;
}

#left-home-content .spread-the-word h3 {
    color: white;
    font-size: 16px;
    float: left;
    font-size-adjust: 0.47;
    width: 129px; /* Specified to correct for MobileSafari oddness re: SVG fonts*/
    text-shadow: #627C39 0 0 10px;
    text-shadow: rgba(98,124,57,0.5) 0 0 10px;
}

#left-home-content .addthis_32x32_style .at300bs,
#left-home-content .addthis_32x32_style .at15t {
    background: url(/dev/images/spread-the-word/spread-the-word-icons.png) no-repeat left;
    overflow: hidden;
    display: block;
    background-position: 0 0;
    height: 28px;
    width: 28px;
    line-height: 28px!important;
}

#left-home-content .at300bs:hover {
    opacity: 1;
            box-shadow: 0 0 15px #fff;
       -moz-box-shadow: 0 0 15px #fff;
    -webkit-box-shadow: 0 0 15px #fff;
}

#left-home-content .addthis_default_style .at300b,.addthis_default_style .at300m { padding: 0; }

#left-home-content .addthis_32x32_style .at15t_compact { background-position: 0 0; width: 28px; height: 28px; margin-right: 0; }
#left-home-content .addthis_32x32_style .at15t_facebook { background-position: 0 -78px; width: 28px; height: 28px; }
#left-home-content .addthis_32x32_style .at15t_linkedin { background-position: 0 -156px; width: 28px; height: 28px; }

/* @end */

/* @end */

Now, let's include the corresponding HTML.

<section id="left-home-content-container" class="left-col">
    <div id="left-home-content">
        <h3><a href="#">Now Let&rsquo;s Make a Difference</a></h3>
        <div class="spread-the-word" id="left-home-spread">
            <h3>Spread the Word</h3>
            <ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
                <li><a class="addthis_button_linkedin"></a></li>
                <li><a class="addthis_button_facebook"></a></li>
                <li class="last-item"><a class="addthis_button_compact"></a></li>
            </ul>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

        <p>Nullam nec risus vel sapien laoreet tincidunt et eget sem.</p>

        <span class="read-more-link"><a href="#">Read More</a></span>

    </div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->

Check out this screenshot for visual reference on how I want the final layout to look like. Now, do you have any suggestions? It seems like using position:absolute; along with float is causing issues, and setting position:relative; doesn't provide the desired outcome either. Share your ideas!

htmlcss

Answer №1

Without reading the text, my suggestion would be to place the "spread the word" feature after all paragraphs in the picture, align it to the right using a negative top margin, and avoid absolute or fixed positioning.

<section id="left-home-content-container" class="left-col">
    <div id="left-home-content">
        <h3><a href="#">Now Let&rsquo;s Make a Difference</a></h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <div class="spread-the-word" id="left-home-spread">
            <h3>Spread the Word</h3>
            <ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
                <li><a class="addthis_button_linkedin"></a></li>
                <li><a class="addthis_button_facebook"></a></li>
                <li class="last-item"><a class="addthis_button_compact"></a></li>
            </ul>
        </div>

        <span class="read-more-link"><a href="#">Read More</a></span>

    </div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->

Regarding CSS...

.spread-the-word { float:right; margin-top:-200px; width:200px; }

The negative top margin should be equal to the height of the entire box for proper alignment. Consider wrapping paragraphs and h3 tags inside another container if needed, ensuring that the box comes after them.

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

Ways to expand a Bootstrap input field by clicking on it:

I have successfully created a search bar in my navbar, but I am looking to add functionality that allows the input field to expand to its normal size when clicked. I believe this will require some JavaScript implementation, however, I am unsure how to proc ...

javascripthtmltwitter-bootstrap

When the data-toggle="table" attribute is utilized, the content will be shown as plain text within the <td> element

While incorporating bootstrap data-toggle="table", an issue arises wherein it converts content within <td> into plain text disregarding any tags. https://i.sstatic.net/nuTLY.png The code snippet in question is as follows <!DOCTYPE html ...

htmlcssbootstrap-4

Unable to manipulate or customize the V-slot component

I recently implemented the v-flip feature on my Nuxt webpage, resulting in the following template: <div class="about__cards"> <vue-flip class="about__single-card" active-click width = "350px" height="450px"> <template v-slot:front> ...

cssvue.jsnuxt.jsv-slot

Combining Sass and SCSS in webpack: A step-by-step guide

Just curious about something. I have some libraries I'm interested in using (for example, font-awesome) that use scss, but I personally prefer working with sass. How can I set up my project with webpack to accommodate this? Here's my current s ...

cssreactjswebpacksasswebpack-style-loader

Tips for creating a vertical scrollbar within a row component

Is there a way to create a scrollable parent v-row with a child v-row overflowing with content so that I can nest another v-row inside the v-col and ensure it remains within the scroll element? <v-row> <v-col> <v-row> <p ...

htmlcssvue.jsoverflow

How can I reset the alternating table row in a new table using CSS?

I am encountering an issue with alternating row colors in my tables. Even though I have two separate tables, the tr:odd rule is being applied across both tables. Below is the HTML for my tables: <table class='myTable'> <tr class=&a ...

jqueryhtmlcssjquery-selectors

The function putImageData does not have the capability to render images on the canvas

After breaking down the tileset The tiles still refuse to appear on the <canvas>, although I can see that they are stored in the tileData[] array because it outputs ImageData in the console.log(tileData[1]). $(document).ready(function () { var til ...

javascriptjqueryhtmlcanvas

Maintaining Aspect Ratio and Adding Letterboxes with Next.js Image

In my Next.js app, there is a section dedicated to displaying selected photos from a gallery. It's crucial for this area to maintain a fixed size of 566px*425px as users navigate through images or when a photo is loading. While the layout is responsiv ...

cssnext.js

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

csshyperlink

How can I capture a screenshot of the div displaying pictures uploaded by the user on the frontend?

Take a look at this code snippet. It allows users to upload images, move them around, resize, and rotate them once uploaded. $(function() { var inputLocalFont = $("#user_file"); inputLocalFont.change(previewImages); function previewImages() { ...

javascriptphpjquerycssjquery-plugins

When I click on my Material UI avatar image, it seems to override the button I had in

Every time I try to create a basic category filter with images, I encounter a frustrating bug. After examining the console log, it seems that when I click on the button, my image is being clicked and behaving like an image. However, when I click around the ...

htmluser-interfacematerial-uinext.js

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css

Use jQuery to achieve smooth scrolling when clicking on a link that points to a specific #div, maintaining the URL

I have a single page design with smooth scrolling implemented using jQuery with the following code: function ScrollMe(id){ var offset = $("#"+id).offset().top-50; $('html,body').animate({scrollTop: offset},'s ...

jqueryhtml

HTML5 Canvas with Transparent Color Feature

I have created a basic Pong game using Javascript and the Canvas element. To allow the background image of the div tag to show through the canvas, I set the background color of the canvas to be transparent. However, I encountered an issue where the ball ...

javascripthtmlcanvas

Leveraging background images in HTML and CSS to create interactive clickable links

I'm attempting to create the illusion of a clickable background image using HTML and CSS, following a tutorial I found here. Unfortunately, I'm encountering two issues: 1) The link is not fully covering the background image 2) The link does not ...

htmlcss

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

javascripthtmlalpine.js

inputting an array of strings into the value attribute of an input element using jQuery

Whenever a user writes something in the input field with id="clientAdd" and presses enter, that text should be displayed as a tag inside a div. These tags are then saved as an array of strings, which I want to pass as the value for the hidden input field w ...

javascriptjqueryhtml

The elegant scroll-bar (whether directive-based or not) seems to be having trouble functioning within the ng-view

I am looking to add a stylish scroll bar to a paragraph that is located within the ng-view. My module code appears as follows: var myweb = angular.module('myweb' , ['ngRoute', 'perfect_scrollbar']); myweb.config(function($ro ...

javascripthtmlangularjsperfect-scrollbar

Establishing the rotation attribute of an SVG circle to create an angular progress tracker

Exploring the code of an Angular component and came across how the r attribute for an svg circle is defined like this: [attr.r]="radius - stroke / 2" This seems to work, but I'm wondering why it's done this way. Isn't the r attribute suppo ...

htmlangularsvg

Tips for adjusting alignment in MaterializeWould you like to change the alignment

I have implemented the Materialize framework for my front-end design. Initially, everything looks good when the page loads, but upon returning to the index, there is an alignment issue. Clearing the cookies seems to fix it. Here is how it currently looks: ...

phphtmlcsscodeigniter