CSS - How can I position one div on top of another without them overlapping each other?

Hi there! I am having trouble positioning the lower div box next to the upper box with details. I tried using absolute positioning, but it keeps going down for some reason (I set the parent div of all three divs as position relative). Can someone help me fix this issue or suggest a better way to achieve this layout?

Check out the screenshot here:

Description of Divs:

   #user_panel - div containing all other divs as children
   #user_details - div displaying details at the top
   #user_photos - div showing photo information
   #user_current - div positioned at the bottom

CSS Styles:

    #user_panel 
    { 
      color: white; 
      position: relative; 
    }
    #user_details 
    { 
      padding: 0 0 30px 0; 
    }
    #user_details table 
    { 
      padding: 30px 20px 10px 30px; 
      border: 1px solid grey; 
      margin: 0 60px 0 40px
    }
    #user_details table tbody tr td#right 
    { 
      padding: 0 0 0 100px; 
    }
    #users_title 
    { 
      padding: 20px 0 0 50px; 
    }

    div#user_photos 
    { 
       width: 850px; 
       height: 230px; 
       border: 1px solid grey; 
       margin: 50px 0 0 40px;
       padding: 0 0 20px 20px;  
    }

   #user_current 
   {
      border: 1px solid grey; 
      width: 320px; 
      position: absolute; 
    }

Answer №1

When positioning one div over another, it's important to consider how they will interact. If you don't want them to overlap, adjusting the size of the upper div and using float: left; can help align them side by side.

Remember to clear floats to avoid unexpected layout issues with background colors.

If you opt for position: absolute;, be prepared for some overlap. To control this, set a parent container to position: relative; and then use position: absolute; with specific properties like top, right, bottom, and left.

Without setting position: relative;, absolute positioning can cause elements to behave unpredictably on the page.

Answer №2

If you intend to position the lower div box in the available space next to the upper-left div box without overlapping, using floats would be the optimal solution.

Assuming the upper-left box is identified with the id "details", the bottom box with the id "current-pic", and the full-width box in the middle of your screenshot with the id "photos", a suggested layout could look like this:

EDITED: Apologies for composing the response before you provided your HTML. The revised code below now reflects the ids from your original HTML.

Your HTML structure might resemble:

<div id="user_details"></div>
<div id="user_current"></div>
<div id="user_photos"></div>

The basic CSS layout would include:

#user_details {
   float: left;
   width: 50%;
   box-sizing: border-box;
   /* other styling such as padding, etc. */
}
#user_current {
   float: right;
   width: 50%;
   box-sizing: border-box;
   /* other styling such as padding, etc. */
}
#user_photos {
   clear: both;
}

This setup does not factor in content within the boxes or space between them, but utilizing the box-sizing property will aid in maintaining the layout integrity while adding margins, padding, and borders.

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 prevent a particular link from functioning in HTML or JavaScript

Hey there, I am currently using a Gchat voice and video chat script. Check out my website if you're interested. The issue I'm facing is that someone logs into my chatroom and uses this flash link to crash other users' browsers. Whenever th ...

What is the best way to center a button element horizontally within a div element?

I am looking for a way to center a button horizontally without adding CSS directly to the div element (for example, using <div style="text-align: center;">). My goal is to apply CSS code specifically to the button element. <div> <butto ...

Have you utilized the `calc()` CSS property in a group while employing the margin shorthand?

Can we simplify the following code snippet by defining the value [6.25% - 5px] only once? margin-top:calc(6.25% - 5px);margin-bottom:calc(6.25% - 5px) Could it be optimized to something like this: margin:calc(6.25% 0 0 - 5px) However, the [0 0] part is ...

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

Use Javascript to display an image based on the date, otherwise hide the div

I'm looking to implement an image change on specific dates (not days of the week, but actual calendar dates like August 18th, August 25th, September 3rd, etc). Here's the div I'm working with: <div id="matchday"> <img id="home ...

Utilizing AngularJS, the method to retrieve the image source from text within a scope variable

In my current project, I have a scope variable that contains a segment of HTML code. Here's an example: $scope.htmlcode = '<img src="image-path/image-name.jpg" /> some plain text,some plain text text etc etc'; My goal is to display o ...

Transform @Html.PagedListPager from MVC into a structured list using Ul and LI elements

I'm currently using a paging code in my view. How can I convert this into "ul & li" tags? @Html.PagedListPager(Model, page => Url.Action("DisplayTTs", "TTCreator", new { page = page, SearchTT = ViewBag.searchTxt })) ...

The color of ngClass does not update according to the variable's value

When the value is true, I want to display a green text message and when it's false, I want it to be red. This is my angular app: In the controller, I declare a variable at the beginning and set it as true: $scope.IsColor = true; if (response.data.i ...

Automatically redirecting every 10 seconds, no need to refresh

My goal is to redirect my webpage using HTML. I've tried the method that everyone suggested: <meta http-equiv="refresh" content="0; URL=http://zacharycabal.tumblr.com/tagged/b&w">, but unfortunately, the page refreshes every 10 seconds which ...

Are there any issues with the onClick function not being detected in React?

I am currently working on a project using NextJs and TypeScript, and I have encountered some strange issues with the onClick function. It appears that the function is not being recognized within my component. "use client"; import styles from &quo ...

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Exploring the capabilities of animate.css and jQuery within a bootstrap environment has been quite interesting for me. However, I've encountered a major issue! I am attempting to trigger animations on mouseenter / mouseleave, which led me to create a ...

Create a triangular shaped division element to contain text and automatically close when the user moves the cursor away

Is there a way to create a triangular div that can display text and images? I tried this method, but the issue I'm facing is that when the div opens on hover, it doesn't close properly when I hover out. Since the div is in a square shape, how ca ...

Choose an image for a better view with the use of HTML and JavaScript/JQuery

Requesting assistance in creating a simple code using plain html5 and JavaScript/jQuery (without plugins) that will enlarge an image upon clicking on it from a list of images. Here is the HTML snippet provided: <!-- Large image holder --> & ...

Center the text on a Bootstrap progress bar regardless of the progress level

In the image below, notice how the text is currently centered in the middle of the progress bars' progress. Is there a way to have this text 'overlap' the progress, stand out, and be centered across the entire width while still showing the p ...

Issue with Bootstrap 4 Multi Select Functionality in Modal Not Functioning

Having trouble getting a bootstrap multi-select dropdown to work inside a Bootstrap modal. When the modal opens, the following CSS is affecting the dropdown: select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.selectpicker { ...

Tips for parsing HTML to modify every word in the document:1. Use

Here is a common query that keeps popping up. I have HTML content that is well-structured (coming from a controlled source). My task is to loop through the body of the HTML, identify all words in the document, make some modifications to those words, and t ...

What is the best way to conceal a section of a div using CSS/React?

I am attempting to create a design where the entire content of a div is displayed initially, and then after clicking a button labeled "show less", only 300px of the content will be shown with the button changing to "show more". <div className="bod ...

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?

I have encountered an issue where the app functions correctly when I open the HTML file in my browser, but fails to load the CSS and JavaScript when accessing it through localhost:3000. HTML: <html> <head> <link href="./main.css" rel="st ...

Limiting the height of a Bootstrap 4 column to match another column's height: A simple guide

I currently have a layout with two columns in a row. The left column has a fixed height determined by its content (height:auto), while the right column is longer and may overflow once it reaches the height of the left column. How can I make sure the right ...

Exploring tags and attributes in Python code with BeautifulSoup

I am looking to iterate through all the tags within a specific section of an HTML page without using BeautifulSoup, just leveraging the Selenium library. Consider the following HTML code snippet: <table id="myBSTable"> <tr> <th& ...