Arrange elements side by side
Good Morning folks,
I'm trying to align an image with a table, but I'm not getting it. Can someone help me identify what is missing?
Follows code below:
Index.html
<section id="view_patient">
<div id="print_boneco">
<h2 id="title_view_patient">
Paciente
<?php while($dado = $name->fetch_array()){ ?>
<?php echo $dado["patient_name"]; ?>
<?php }?>
</h2>
<img src="print-corpo-pain-free.jpg" alt="print-boneco" id="print_boneco_app" width="300" height="500" />
</div>
<div id="table_info">
<table class="table">
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">CPF</th>
<th scope="col">E-mail</th>
<th scope="col">telefone</th>
<th scope="col">endereço</th>
</tr>
</thead>
<tbody>
<tr>
<?php while($dado = $consulta->fetch_array()){ ?>
<td><?php echo $dado["patient_name"]; ?></td>
<td><?php echo $dado["patient_cpf"]; ?></td>
<td><?php echo $dado["patient_email"]; ?></td>
<td><?php echo $dado["patient_phone"]; ?></td>
<td><?php echo $dado["patient_address"]; ?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</section>
Index.css
#view_patient
{
width: 45em;
margin: 0 auto;
}
#table_info
{
display: block;
float: left;
}
#print_boneco
{
display: block;
float: right;
}
1
Author: Laura Regina, 2019-04-26
2 answers
One of the options for this is to put flex
in the container parent #view_patient
and flex-direction:row-reverse
for the image to be to the right of the table
#view_patient {
width: 45em;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
}
#table_info {
/* display: block; */
/* float: left; */
}
#print_boneco {
/* display: block; */
/* float: right; */
}
<section id="view_patient">
<div id="print_boneco">
<h2 id="title_view_patient">
Paciente
<!-- <?php while($dado = $name->fetch_array()){ ?>
<?php echo $dado["patient_name"]; ?>
<?php }?> -->
</h2>
<!-- <img src="print-corpo-pain-free.jpg" alt="print-boneco" id="print_boneco_app" width="300" height="500" /> -->
<img src="https://placecage.com/100/100">
</div>
<div id="table_info">
<table class="table">
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">CPF</th>
<th scope="col">E-mail</th>
<th scope="col">telefone</th>
<th scope="col">endereço</th>
</tr>
</thead>
<tbody>
<tr>
<!-- <?php while($dado = $consulta->fetch_array()){ ?> -->
<td>php echo $dado["patient_name"]; ?></td>
<td>php echo $dado["patient_cpf"]; ?></td>
<td>php echo $dado["patient_email"]; ?></td>
<td>php echo $dado["patient_phone"]; ?></td>
<td>php echo $dado["patient_address"]; ?></td>
</tr>
<!-- <?php }?> -->
</tbody>
</table>
</div>
</section>
1
Author: hugocsl, 2019-04-26 14:13:36
I think it's just aligning with margin-top that's what I did.
#view_patient
{
width: 44em;
margin: 0 auto;
}
#table_info
{
display: block;
float: left;
margin-top: 65px;
}
#print_boneco
{
display: block;
float: right;
}
#table_info td, #table_info th {
border: 1px solid #ddd;
padding: 8px;
}
#table_info tr:nth-child(even){background-color: #f2f2f2;}
#table_info tr:hover {background-color: #ddd;}
#table_info th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
<section id="view_patient">
<div id="print_boneco">
<h2 id="title_view_patient">
Paciente
</h2>
<img src="https://i.gifer.com/fetch/w300-preview/c6/c6fe15a3ab951824f03455cdb7f51cd9.gif" alt="print-boneco" id="print_boneco_app" width="300" height="500" />
</div>
<div id="table_info">
<table class="table">
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">CPF</th>
<th scope="col">E-mail</th>
<th scope="col">telefone</th>
<th scope="col">endereço</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nome</td>
<td>CPF</td>
<td>Email</td>
<td>Phone</td>
<td>Adress</td>
</tr>
<td>Nome</td>
<td>CPF</td>
<td>Email</td>
<td>Phone</td>
<td>Adress</td>
</tr>
<td>Nome</td>
<td>CPF</td>
<td>Email</td>
<td>Phone</td>
<td>Adress</td>
</tr>
<td>Nome</td>
<td>CPF</td>
<td>Email</td>
<td>Phone</td>
<td>Adress</td>
</tr>
<td>Nome</td>
<td>CPF</td>
<td>Email</td>
<td>Phone</td>
<td>Adress</td>
</tr>
</tbody>
</table>
</div>
</section>
0
Author: denis, 2019-04-26 14:21:18