Stacking of div tags on top of each other

Looking for assistance with some CSS challenges.

I am attempting to design a group of buttons using div tags, but they are all merging into one another.

You can find the code at http://codepen.io/CliffTam/pen/gadEaq

Could someone review the code and provide suggestions on how to resolve this issue?

I've tried creating a separate DIV tag class 'box' and setting display:block, as shown below:

div.box {
    margin: 5px;
    padding: 5px;
    height: auto;
    width: auto;
    display: block;
    position: absolute;
}

However, they continue to remain connected.

Many thanks! Cliff

Answer №1

To fix the overlapping issue, update the CSS from position: absolute; to position: relative; for both the .box and .profile-image elements in order to stack them properly.

Previous positioning caused them to all stack at the top left, creating a visual merging effect...

Check out the solution here: http://codepen.io/samuidavid/pen/JYaVOQ

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

Is there a method to make changes to files on a deployed Angular application without the need to rebuild?

After deploying my Angular application on a production environment using the command npm run build --prod --base -href, I now need to make changes to some static HTML and TypeScript files. However, since the app is already bundled and deployed, I'm un ...

To avoid truncation issues, consider inserting a plus sign following the ellipsis in the text-overflow property

Hey there! I have a table that contains some text and I'm looking to shorten the text after it reaches a certain length. I was able to achieve this using the text-overflow property. .overflow { width: 70px; overflow: hidden; text-overflow: elli ...

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

Display updated text on hover over button panel

Is it possible to achieve the following using only CSS without any JavaScript? The desired outcome is a div containing two font awesome icons aligned to the right side. Specifically, I am looking for: - Icon of a pen that reacts on mouse hover - Icon o ...

Adjust the size of the image as needed in order to fit within a container of fixed

Is there a clever way to use CSS and/or JavaScript/jQuery to adjust the size of images only when necessary for them to fit within a fixed-height container alongside the remaining content? Upon reviewing the images in the 'new this week' and &apos ...

How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

I am encountering an issue with my iframe border when using CSS. The problem arises in Chrome where the border disappears upon resizing the page, while Safari changes the size (Firefox appears unaffected) https://i.sstatic.net/ZUi9z.gif Are there any kno ...

Adjust the CSS border to finish at a 90-degree angle rather than a 45-degree angle

The div I'm working with has unique colors for the border-bottom and border-right properties, creating a diagonal line that separates the box at a 45 degree angle. I'm looking to adjust the bottom-border to be shorter in order for the right bord ...

"Create a Single-Page Bootstrap Website with a Responsive Design showcasing PHP Code within the Contact Form

Working on the final touches of a single-page responsive website project for a client. Utilizing a Bootstrap contact form located at the bottom of the HTML document. The PHP code is unexpectedly displaying in the text fields of the contact form. I've ...

Hover effect malfunctioning on the website

I am in the process of building a website using WordPress with the 2017 theme. I recently added a link to my page by inserting the following HTML code: <a href="www." target="_blank"><span style="color: #0000ff;">text</span></a> A ...

Numerous lists conveniently consolidated within a single navigation bar

I am currently exploring the functionality of StumbleUpon's navigation bar by attempting to replicate it. My approach involves using 3 lists within 1, structured like this: <nav role="navigation"> <ul id="rightnav"> & ...

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

Guide on generating a dynamic table by looping through an array and placing values inside <tr> tags, then saving it in a variable

I am working with an array object and need to dynamically create a table where each tablerow (tr) pulls values from the array object. After creating the table, I want to store it in a variable so that I can pass it to a rest call, triggering an email with ...

I need to print out a table, but when I preview the print, I want to rotate the entire page for better visibility

Is there a way to rotate the print review using CSS and HTML? I am facing issues as the CSS styles do not seem to apply properly on it. Can someone help me solve this problem? ...

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...

Stop the WebGL Three.js container from capturing scroll events

I am working on a full-screen three.js application which serves as the background and I am trying to add overlaid text that can be scrolled. However, my issue arises from the fact that the three.js WebGL container intercepts all scroll events and prevents ...

Unable to prevent ordered lists from overlapping with other content I attempt to place beneath them in HTML

function filterImages() { let input = document.getElementById('searchbar').value; input = input.toLowerCase(); let images = document.getElementsByClassName('gallery'); for (let i = 0; i < images.length; i++) { ...

What are some creative ways to incorporate images into SVG paths?

Check out my JSFiddle here. I'm attempting to position this image in the center of my arc. My initial thought was to use .attr("fill","url('somePicture')"), but so far, no luck with that approach. const width = 700; const height = 600; con ...

Does the value of an Angular reactive form control only reflect what the user inputs?

I am working with a reactive form where I need to extract values and assign them to a variable defined in an interface. The form is populated using the Google Places API, which disables user interaction with all controls except for the initial address inpu ...

Is there a way to stop the page from scrolling once I reach the bottom of a specific div within it?

My webpage has multiple divs that share a similar structure: <div style="height:200px; overflow:auto;"> <div style="height:300px;"> <!--There is a lot of content here--> </div> </div> When the user hovers ove ...