CODEWITHSUNDEEP
htmlcssdjango
Essex
Essex

Reputation: 6138

Put elements from left and right side to the same line

I'm using html2pdf with my Django project in order to create some PDF files and I get an HTML problem.

I would like to put two elements situated on the same line but the first one is located into the right side and the other one to the left side.

My script looks like :

<html>
    <head>
    {% load staticfiles %}

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="{% static 'css/BC_base.css' %}"/>

    <style>

        body {
                font-family: Courier New, Courier, monospace;
                /*text-align: justify;*/
                list-style-type: none;
            }

        .alignleft {
                float: left;
                border-right : 100px;
            }
        .alignright {
                float: right;
                border-left: 100px;
            }

        .title {
                border-top: 150px;
                font-size: 7;
        }

        {% block style %}
                @page {
                size: landscape;
                }

        {%endblock%} 
    </style>

    </head>

        <h2 class = "title" align="center" > ATTESTATION DE RECENSEMENT </align> </h2>

        <div id="textbox">
            <p class="alignleft">Le maire de la commune <br />de {{mairie.city}}</p>
            <p class="alignright">Imprimé n° {{ar.id}}<br/> Loi n° ... du XX XX XXXX</p>
        </div>

But I don't overcome to put alignleft and alignright classes on the same line.

I'm using the library html2pdf to do that so all CSS command are not take account.

Thank you if you have an idea ?

EDIT :

This is what I'm getting with @ShivkumarKondi answer :

enter image description here

Upvotes: 1

Views: 4502

Answers (4)

Emanuel Saramago
Emanuel Saramago

Reputation: 506

According to this answer, the problem is html2pdf itself, because it doesn't render css floats like it should.

Try wrapping your html with a <table>. Like this:

#upp {
  width: 100%;
  /*background:red;*/
}
.alignleft,
.alignright {
  display: inline-block;
  background: red;
}
.alignleft {
  padding-left: 100px;
}
.alignright {
  padding-right: 100px;
}
<table id="upp">
  <tr>
    <td>
      <p class="alignleft">Le maire de la commune <br />de {{mairie.city}}</p>
    </td>
    <td></td>
    <td align="right">
       <p class="alignright">Imprimé n° {{ar.id}}<br/> Loi n° ... du XX XX XXXX</p>
    </td>
  </tr>
</table>

Upvotes: 8

ericls
ericls

Reputation: 106

Why not use flex?

.outter {
  display: flex;
  justify-content: space-between;
}
<div class="outter">
  <div>LEFT</div>
  <div>RIGHT</div>
</div>

Upvotes: -1

Shivkumar kondi
Shivkumar kondi

Reputation: 6782

Normal float property is enough here to the task,which gives you below output

.alignleft {
  float: left;
  border-right : 100px;
  background:red;



}
.alignright {
  float: right;
  border-left: 100px;
  background:red;
}
<div id="textbox">
  <p class="alignleft">Le maire de la commune <br />de {{mairie.city}}</p>
   <p class="alignright">Imprimé n° {{ar.id}}<br/> Loi n° ... du XX XX XXXX</p>
</div>

update :

In your case floats are not working in html2pdf ,so I would recommend to go for bootstrap grid system. Just give a try here also

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> 

<div class="row" style="background:grey;">
  <div class="col-xs-3">content left</div>
  <div class="col-xs-6"></div>
  <div class="col-xs-3" style="text-align:right;">content right</div>
</div>

</body>
</html>

Upvotes: -1

PMA
PMA

Reputation: 89

Both have to float left and you have to apply them a display property to each one. Probably display: inline.

Upvotes: -1

Related Questions