Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

use <div> as a second <body> element to work on webpage

thehen

Coder
This is how my website is looking at the moment, just under the menu there are the following text Sun,Mon.......
I need this to be at the left side bottom.

I already using <body> elemeny, so cannot use it twice, but it needs a <body> element (cannot change the first body element> so I try to use <div> element, cannot get this to work.

my webpage at the moment
want to add this at bottom

Here the code

HTML:
</div>
            <div class="body1">
                <ul class="week">
                    <li>Sun</li>
                    <li>Mon</li>
                    <li>Tue</li>
                    <li>Wed</li>
                    <li>Thu</li>
                    <li>Fri</li>
                    <li>Sat</li>
                <ul>
            </div>

CSS:
.body1
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins' sans-serif;
    font-size: 40px;
    
}
 
Solution
You could use css postion: absolute

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            My Page
        </title>
        <style>
            #bottom-left-div {
                border: solid 1px black;
                width: 10%;
                text-align: center;
                padding: 1rem;
                background: tomato;
                position: absolute;
                left: 10px;
                bottom: 10px;
            }
        </style>
    </head>

    <body>
        <div id="bottom-left-div">
            Some text here
        </div>
    </body>
</html>

1673981487992.png
You could use css postion: absolute

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            My Page
        </title>
        <style>
            #bottom-left-div {
                border: solid 1px black;
                width: 10%;
                text-align: center;
                padding: 1rem;
                background: tomato;
                position: absolute;
                left: 10px;
                bottom: 10px;
            }
        </style>
    </head>

    <body>
        <div id="bottom-left-div">
            Some text here
        </div>
    </body>
</html>

1673981487992.png
 
Solution
You could use css postion: absolute

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            My Page
        </title>
        <style>
            #bottom-left-div {
                border: solid 1px black;
                width: 10%;
                text-align: center;
                padding: 1rem;
                background: tomato;
                position: absolute;
                left: 10px;
                bottom: 10px;
            }
        </style>
    </head>

    <body>
        <div id="bottom-left-div">
            Some text here
        </div>
    </body>
</html>

View attachment 1961
Thank you, this is working
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom