Using CSS to position two divs at the bottom-right corner of the page by using the `position: absolute` property

Question

Using CSS to position two divs at the bottom-right corner of the page by using the `position: absolute` property

Currently working on creating an uncomplicated chatbox with a header using CSS. My aim is to position the chat at the bottom and right of the page. I've experimented with the following:

float: right;
bottom: 0;
position: absolute;

Although this aligns it to the bottom, it doesn't place it correctly to the right. Below is my complete code:

CSS

#chatbox {
    height: 360px;
    width: 320px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    float: right;
    bottom: 0;
    position: absolute;
}
.chatheader {
    font-family:'PT Sans';
    background: #999;
    width: 322px;
    height: 36px;
    color: #fff;
    text-align: center;
    padding-top: 15px;
}

HTML

<div class="chatheader">chatboxheader</div>
<div id="chatbox">

</div>

If you'd like to see the code in action here's a demo link DEMO I'm keeping it simple for now to focus on alignment before enhancing the design. Appreciate any assistance provided! Thank you!

html css

Answer 1

Answer №1

To have both the chatheader and chatbox display at the bottom right of the page, I made a few adjustments to the code. I placed both elements within a div container.

Here is the updated HTML:

<div id="chat-container">
    <div class="chatheader">chatboxheader</div>
    <div id="chatbox"></div>
</div>

And here is the CSS:

#chat-container {
    right: 0;
    bottom: 0;
    position: absolute;
}

The right:0 property ensures that the element stays at the far right of the page.

You can view the updated fiddle here.

Answer 2

To have both the chatheader and chatbox display at the bottom right of the page, I made a few adjustments to the code. I placed both elements within a div container.

Here is the updated HTML:

<div id="chat-container">
    <div class="chatheader">chatboxheader</div>
    <div id="chatbox"></div>
</div>

And here is the CSS:

#chat-container {
    right: 0;
    bottom: 0;
    position: absolute;
}

The right:0 property ensures that the element stays at the far right of the page.

You can view the updated fiddle here.

Answer 3

Answer №2

Check out the live DEMO here

Here is the HTML code:

#chatbox {
    height: 360px;
    width: 320px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.chatheader {
    font-family:'PT Sans';
    background: #999;
    width: 322px;
    height: 36px;
    color: #fff;
    text-align: center;
    padding-top: 15px;
    float:right;
}
.chatMain {
    position:absolute;
    bottom:0;
    right:0;
}

Answer 4

Check out the live DEMO here

Here is the HTML code:

#chatbox {
    height: 360px;
    width: 320px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.chatheader {
    font-family:'PT Sans';
    background: #999;
    width: 322px;
    height: 36px;
    color: #fff;
    text-align: center;
    padding-top: 15px;
    float:right;
}
.chatMain {
    position:absolute;
    bottom:0;
    right:0;
}

Using CSS to position two divs at the bottom-right corner of the page by using the `position: absolute` property

Answer №1

Answer №2

Similar questions

The PHP navigation is being obscured by the image gallery

What is preventing my code from being recognized as a valid XML file?

Use CSS elements selectively on specific pages within Mkdocs

Setting the row property of a frameset using CSS: a step-by-step guide

Upload several files sequentially in a form on a website using Selenium with Python

Issues persisting with vertical alignment in table cells on Firefox browser

Is there a way to activate an event listener specifically for clicking on an image?

Creating a div that reaches the bottom of a scrollable webpage in ASP

Is it possible to create a mouse-following effect with lighting using Javascript

What is the best way to conceal panels while a bootstrap is being utilized?

Tips for ensuring a flexbox stays within the bounds of its container and doesn't exceed the available space

Share the name of the Quasar component with the Vue 3 render function

AngularJS: Embedding a webpage within a <div> container

Displaying information in an alert box with the use of JavaScript

When CSS is applied, the canvas is stretched, whereas it remains normal when `width` and `height` attributes are used

Troubleshooting issue with image dimensions in Angular within CKEditor content

Tips for ensuring consistency in the appearance of a webpage across various browsers

Ways to interact with a button that toggles between states

Is it possible to decrease the size of a div by scrolling both vertically and horizontally?

What are the steps to address a bug in Bootstrap carousel?