Issue
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
Solution
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>Answered By - MaxiGui
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.