Tips for positioning divs at the bottom of the screen while making them inline and overlapping their parent div

Question

Tips for positioning divs at the bottom of the screen while making them inline and overlapping their parent div

Is there a way to make divs display at the bottom of the screen in a horizontal line, overlapping their parent div just like Facebook chat? I have attempted the following code but it doesn't seem to work.

<div id="container">
   <div class="box">
   </div>
   <div class="box">
   </div>
   <div class="box">
   </div>
</div>

#container{
   height:10px;
   position:fixed;
   bottom:0;
   width:1000px;
   margin:0 auto;
}
.box{
   border:1px solid blue;
   width:250px;
   height:300px;
   display:inline-table;
   position:fixed;
   bottom:0;
}

html css

Answer 1

Answer №1

To create a clean layout, wrap the elements in a container div positioned absolutely.

It's important to avoid using duplicate id's in your HTML code. Instead, utilize classes for styling purposes.

Your HTML structure will look something like this:

<div id="container">
    <div class="box-container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
     </div>        
 </div>

Avoid using display:inline-table and fixed together. For the container div, consider using position:absolute or position:fixed if you want the items to remain in place. Use display:inline-block for the .box elements to ensure they align inline.

#container {
   height:10px;
   position:fixed;
   bottom:0;
   width:1000px;
   margin:0 auto;
}

.box-container {
    position:absolute;
    bottom:0;
    height:40px;
    width:100%;
}

.box{
   border:1px solid blue;
   width:250px;
   height:40px;
   display:inline-block;
}

For a visual example, check out http://jsfiddle.net/B228U/1/.

Best regards,

Jeroen

Answer 2

To create a clean layout, wrap the elements in a container div positioned absolutely.

It's important to avoid using duplicate id's in your HTML code. Instead, utilize classes for styling purposes.

Your HTML structure will look something like this:

<div id="container">
    <div class="box-container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
     </div>        
 </div>

Avoid using display:inline-table and fixed together. For the container div, consider using position:absolute or position:fixed if you want the items to remain in place. Use display:inline-block for the .box elements to ensure they align inline.

#container {
   height:10px;
   position:fixed;
   bottom:0;
   width:1000px;
   margin:0 auto;
}

.box-container {
    position:absolute;
    bottom:0;
    height:40px;
    width:100%;
}

.box{
   border:1px solid blue;
   width:250px;
   height:40px;
   display:inline-block;
}

For a visual example, check out http://jsfiddle.net/B228U/1/.

Best regards,

Jeroen

Answer 3

Answer №2

A common mistake is giving the same id to different elements, which should be unique. Instead, use classes for styling. Remember to set the main div with position:relative and float:left for the box class. Here's an example:

<div id="container">
   <div class="box">
   </div>
   <div class="box">
   </div>
   <div class="box">
   </div>
</div>


#container{
   height:10px;
   position:absolute;
   bottom:0;
   width:1000px;
   margin:0 auto;
}
.box{
   border:1px solid blue;
   width:250px;
   height:300px;
   float:left;
   display:inline-table;
   position:relative;
   bottom:0;
}

http://jsfiddle.net/7kwLc/

Answer 4

A common mistake is giving the same id to different elements, which should be unique. Instead, use classes for styling. Remember to set the main div with position:relative and float:left for the box class. Here's an example:

<div id="container">
   <div class="box">
   </div>
   <div class="box">
   </div>
   <div class="box">
   </div>
</div>


#container{
   height:10px;
   position:absolute;
   bottom:0;
   width:1000px;
   margin:0 auto;
}
.box{
   border:1px solid blue;
   width:250px;
   height:300px;
   float:left;
   display:inline-table;
   position:relative;
   bottom:0;
}

http://jsfiddle.net/7kwLc/

Tips for positioning divs at the bottom of the screen while making them inline and overlapping their parent div

Answer №1

Answer №2

Similar questions

Characters that have been escaped are showing up when adding them to an HTML element

Elements inside the Bootstrap 3 navbar are actually external

Tips for resolving the issue of encountering the error message "Cannot POST /" while transitioning between different websites

Div with a vertical line

Is it possible to modify the font color of a specific MenuItem in material-ui?

What are the steps to play this using Internet Explorer?

Is there a way to keep the background image stationary as I scroll?

Discover the best way to implement aliases for embedded base 64 images within HTML code

How can you implement CSS styling for Next.js HTML during server-side rendering?

Developing an Easy-to-Use PDF Popup Interface

What is the best method to ensure that my background image is fully visible on a webpage?

Using JSON data to populate the jQuery UI Datepicker

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

Creating a canvas that adjusts proportionally to different screen sizes

Troubleshooting Bootstrap select box design discrepancies

Missing RequestVerificationToken value when hiding HTML element using jQuery

Ways to add space around the td element and properly align the content within it

moving a simulated element to a new location

Flex Item will only respect the margin or padding when both are set simultaneously

WordPress Header Display Issue on Mobile and Tablet Devices: What You Need to Know