Put elements from left and right side to the same line

Question

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 :

you are using p element and its block element which takes full width.so change its display type or use some other inline element — Shivkumar kondi, Feb 15 '17 at 13:47
By which can of elements I could change `
` ? `
` ? I'm really new with html — Essex, Feb 15 '17 at 13:54
Can you modify css properties? If so, you can try with adding `display: inline-block` on both `.alignleft` and `.alignright` — Miquel Canal, Feb 15 '17 at 13:57
can you let me know what you what with some screen shot, and try this codepin to edit your html http://codepen.io/shivk/pen/LxaeyB — Shivkumar kondi, Feb 15 '17 at 14:04
@ShivkumarKondi I tried your css file and I posted an edit in my question with the result. — Essex, Feb 15 '17 at 14:06
Check this: http://stackoverflow.com/questions/8776391/working-with-css-floats-in-html2pdf — Emanuel Saramago, Feb 15 '17 at 14:13

score 8 · Accepted Answer · edited May 23 '17 at 10:29

8

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>

edited May 23 '17 at 10:29

Community

1
1

answered Feb 15 '17 at 14:26

Emanuel Saramago

462
4
16

Thank you it works pretty well. I just have to modify `border-right` and `border-left` spaces because it doesn't seem to work but I get both elements to each side – Essex Feb 15 '17 at 14:34
Do you know how I can fit both elements to the center with landscape format ? `border-left` and `border-right` don't seem to work – Essex Feb 15 '17 at 15:19
Fit to the center? What do you mean? – Emanuel Saramago Feb 15 '17 at 15:59
I would like to add a space between right border and right element for example. I tried `border-right` or `padding-right` but doesn't seem work with `html2pdf` – Essex Feb 15 '17 at 16:05
Did you set padding-left: 100px on .alignleft and padding-right: 100px on .alignright? – Emanuel Saramago Feb 15 '17 at 17:42
Yes and with landscape format I think there's a problem :/ – Essex Feb 16 '17 at 08:57
It should work. Maybe is another problem with html2pdf – Emanuel Saramago Feb 16 '17 at 11:18
I think it's another problem but I overcame to solve it using some arrays with several cells in order to shift elements :) – Essex Feb 16 '17 at 11:20

score 0 · Answer 2 · answered Feb 15 '17 at 14:10

0

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

answered Feb 15 '17 at 14:10

PMA

91
2
13

Shivkumar kondi · Answer 3 · 2017-02-15T14:31:49.837

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>

It doesn't work. Don't forget I'm working on landscape format ! Your example seems to work on portrait format with html. But I'm using landscape format and `html2pdf`. Your answer is exactly my script in the question — Essex, Feb 15 '17 at 14:19
@Valentin Yeah I don't know Why it didn't work, just give a try for bootstrap too — Shivkumar kondi, Feb 15 '17 at 14:33

score 0 · Answer 4 · answered Feb 15 '17 at 14:42

0

Why not use flex?

.outter {
  display: flex;
  justify-content: space-between;
}

<div class="outter">
  <div>LEFT</div>
  <div>RIGHT</div>
</div>

answered Feb 15 '17 at 14:42

ericls

108
1
5

I get an error in my script (`pisaStatus = pisa.CreatePDF(html.encode('utf-8'), dest=file, encoding='utf-8')`) with your method : `Selector name or qualifier expected:: (u'', u'/\n\n \n\n ')` – Essex Feb 15 '17 at 14:45
@Valentin I'm sorry. I completely missed the PDF part. – ericls Feb 15 '17 at 18:01

Put elements from left and right side to the same line

4 Answers4