CODEWITHSUNDEEP
htmlcss
Norman Kuo
Norman Kuo

Reputation: 133

HTML how to make footer look organize with left and right field

I am trying to make a footer in html where it looks like this

Information: Given          True
Address: 123 street         AZ, 91302
Phone: xxx-xxx-xxxx

This is what I tried:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .common-style {
      color: black;
      font-family: "Calibri, sans-serif";
    }
.footer {
        position:absolute;
        width:100%;
        bottom:0; /* stick to bottom */
    }
  </style>
  <body>
    <footer class="footer">
      <div>
        <p class="common-style" style="font-size: 10px; float: left">Information: {{report_information['Given']}}</p>
        <p class="common-style" style="font-size: 10px; float: right">True</p>
        <br />
        <p class="common-style" style="font-size: 10px; float: left">Address: {{report_information['address']}}</p>
        <p class="common-style" style="font-size: 10px; float: right">{{report_information['state_zip']}}</p>
        <br />
        <p class="common-style" style="font-size: 10px; float: left">Phone: {{report_information['phone']}}</p>
      </div>
    </footer>
  </body>
</html>

But instead, I am getting in the html like this:

Information: Given                                                         True
         Address: 123 street                                      AZ, 91302
                           Phone: xxx-xxx-xxxx

Can anyone tell me what I am doing wrong here?

Thank you

Upvotes: 0

Views: 98

Answers (6)

Simon Janvier
Simon Janvier

Reputation: 41

To do this, a good way consists to use a CSS/HTML framework in order to manage the whole layout of your page.

The most known framework for CSS/HTML page building is Bootstrap. It can easily help you to create rows and columns with a very small amount of code. You can find a reference on this page :

https://getbootstrap.com/docs/5.0/layout/columns/

Upvotes: 0

MaxiGui
MaxiGui

Reputation: 6358

Just that simple, make your p inline with a fix width:

footer > div > p{
  display:inline;
  width:50%;
}



footer > div > p{
  display:inline;
  width:50%;
}

.common-style {
    color: black;
    font-family: "Calibri, sans-serif";
}
<footer class ="footer">
    <div>
        <p class = "common-style" style="font-size:10px; float:left;">Information: {{report_information['Given']}}</p>
        <p class = "common-style" style="font-size:10px; float:right;">True</p><br>
        <p class = "common-style" style="font-size:10px; float:left;">Address: {{report_information['address']}}</p>
        <p class = "common-style" style="font-size:10px; float:right;">{{report_information['state_zip']}}</p><br>
        <p class = "common-style" style="font-size:10px; float:left;">Phone: {{report_information['phone']}}</p>
    </div>
</footer>

.common-style {
  color: black;
  font-family: "Calibri, sans-serif";
  
  display:inline-flex;
  width:49%;
  align-items: center;
}
.common-style:nth-of-type(odd){
  justify-content: start;
}
.common-style:nth-child(even){
  justify-content: end;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    
.footer {
        position:absolute;
        width:100%;
        bottom:0; /* stick to bottom */
    }
  </style>
  <body>
    <footer class="footer">
      <div>
        <p class="common-style" style="font-size: 10px;">Information: {{report_information['Given']}}</p>
        <p class="common-style" style="font-size: 10px;">True</p>
        <p class="common-style" style="font-size: 10px">Address: {{report_information['address']}}</p>
        <p class="common-style" style="font-size: 10px;">{{report_information['state_zip']}}</p>
        <p class="common-style" style="font-size: 10px;">Phone: {{report_information['phone']}}</p>
      </div>
    </footer>
  </body>
</html>

Upvotes: 2

pooja
pooja

Reputation: 81

To make the footer organized try using display-inline block or could also use the flex property.

<style>
.footer > div {
    display: inline;
    
}

.common-style {
    color: black;
    font-family: "Calibri, sans-serif";
    width: 50%;
}

</style>


<footer class ="footer">
    <div>
        <p class = "common-style" style="font-size:10px;">Information: {{report_information['Given']}}</p>
        <p class = "common-style" style="font-size:10px;">True</p>
        <p class = "common-style" style="font-size:10px;">Address: {{report_information['address']}}</p>
        <p class = "common-style" style="font-size:10px;">{{report_information['state_zip']}}</p>
        <p class = "common-style" style="font-size:10px;">Phone: {{report_information['phone']}}</p>
    </div>
</footer>

Upvotes: 0

Himesha Patel
Himesha Patel

Reputation: 141

CSS:

.footer > div {
    display: flex;
    flex-wrap: wrap;
}

.common-style {
    color: black;
    font-family: "Calibri, sans-serif";
    width: 50%;
}

HTML:

<footer class ="footer">
    <div>
        <p class = "common-style" style="font-size:10px;">Information: {{report_information['Given']}}</p>
        <p class = "common-style" style="font-size:10px;">True</p>
        <p class = "common-style" style="font-size:10px;">Address: {{report_information['address']}}</p>
        <p class = "common-style" style="font-size:10px;">{{report_information['state_zip']}}</p>
        <p class = "common-style" style="font-size:10px;">Phone: {{report_information['phone']}}</p>
    </div>
</footer>

Upvotes: 0

Nick Gr
Nick Gr

Reputation: 157

You can use flex boxes. Your css should have a class like this:

.flexbox-container{
  display: flex;
  justify-content: space-around;
}

And then your html should be like this:

<div class="flexbox-container">
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
</div>
<div class="flexbox-container">
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
</div>

Any div element you put inside the container will go on the same line and will be spread equally so put a container for each line you want.

Upvotes: 0

seantsang
seantsang

Reputation: 1206

You can generate a proper table with the following URL:

https://divtable.com/generator/

For example, a 2x3 table will be like this:

/* CSS */

.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}
<!--HTML -->

<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">Information: {{report_information['Given']}}True;</div>
<div class="divTableCell">True</div>
</div>
<div class="divTableRow">
<div class="divTableCell">Address: {{report_information['address']}}</div>
<div class="divTableCell">{{report_information['state_zip']}}</div>
</div>
<div class="divTableRow">
<div class="divTableCell">Phone: {{report_information['phone']}}</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

Upvotes: 0

Related Questions