I'm currently working for a program that creates business card, it's almost done except for the image/text floating. I'm using container fluid to make my panels viewed side by side but my problem is in the right side I have a preview of the actual business card but the text won't go on the right side of the logo. I almost tried everything that I can found in internet like float, clear and setting the right axis manually, but it doesn't work. I need help! Please. This is the actual image(the one I'm trying to fix)
Here's my code
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<form class="form-horizontal" action="<?php echo base_url('My_account/do_create_businesscard'); ?>" method="post">
<div class="card-body">
<div class="form-group row">
<label for="pname" class="col-sm-3 text-right control-label col-form-label">Fullname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Fullname" value="<?php echo strtoupper($empInfo->firstname).' '. substr($empInfo->middlename,0,1).'. '. strtoupper($empInfo->lastname);?>" readonly>
</div>
</div>
<div class="form-group row">
<label for="sg" class="col-sm-3 text-right control-label col-form-label">Position and Section</label>
<div class="col-sm-9">
<input type="text" class="form-control" value="<?php echo $empInfo->position_name;?> <?php echo $empInfo->section_name;?>" readonly>
</div>
</div>
<div class="form-group row">
<label for="sg" class="col-sm-3 text-right control-label col-form-label">Division</label>
<div class="col-sm-9">
<input type="text" class="form-control" value="<?php echo $empInfo->division_name;?>" readonly>
</div>
</div>
<div class="form-group row">
<label for="sg" class="col-sm-3 text-right control-label col-form-label">Department</label>
<div class="col-sm-9">
<input type="text" class="form-control" value="FOREIGN SERVICE INSTITUTE" readonly><br><input type="text" class="form-control" value="DEPARTMENT OF FOREIGN AFFAIRS" readonly>
</div>
</div>
<div class="form-group row">
<label for="sg" class="col-sm-3 text-right control-label col-form-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" value="5/F DFA Bldg., 2330 Roxas Blvd." readonly><br><input type="text" class="form-control" value="Pasay City 1300, Philippines" readonly>
</div>
</div>
<div class="form-group row">
<label for="pname" class="col-sm-3 text-right control-label col-form-label">Telephone No.</label>
<div class="col-sm-9" id="telno">
<input type="number" name="txttelno" class="form-control" id="txttelno" min="0" required>
<input type="number" name="txttelno1" class="form-control" id="txttelno1">
<!-- <button type="button" id="add_button_tel"><i class="fas fa-plus-circle"></i></button> -->
</div>
</div>
<div class="form-group row">
<label for="pname" class="col-sm-3 text-right control-label col-form-label">Fax No.</label>
<div class="col-sm-9" id="faxno">
<input type="number" name="txtfaxno" class="form-control" id="txtfaxno" min="0" required>
<!-- <button type="button" id="add_button_fax"><i class="fas fa-plus-circle"></i></button> -->
</div>
</div>
<div class="form-group row">
<label for="pname" class="col-sm-3 text-right control-label col-form-label">Mobile No.</label>
<div class="col-sm-9" id="mobileno">
<input type="number" name="txtmobileno" class="form-control" id="txtmobileno" min="0" required>
<input type="number" name="txtmobileno1" class="form-control" id="txtmobileno1">
<!-- <button type="button" id="add_button_mob"><i class="fas fa-plus-circle"></i></button> -->
</div>
</div>
<div class="form-group row">
<label for="pname" class="col-sm-3 text-right control-label col-form-label">Email</label>
<div class="col-sm-9" id="email">
<input type="email" name="txtemail" class="form-control" id="txtemail" value="<?php echo $empInfo->email;?>" required>
<input type="text" name="txtemail1" class="form-control" id="txtemail1">
<!-- <button type="button" id="add_button_em"><i class="fas fa-plus-circle"></i></button> -->
</div>
</div>
<div class="border-top">
<div class="card-body">
<button type="submit" class="btn btn-success">Create Business Card</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div .all {
clear: both;
}
div .text {
right: 0;
}
</style>
</head>
<body>
<div class="col-5">
<h2>Business Card Preview</h2>
<div class="card" style=" width:100%; border: 2px solid Black;">
<img src="<?php echo base_url('assets/images/fsilogo.jpg')?>" style="float:left;width: 15%; height: 15%;">
<div class="text">
<div id="fullnamecontainer"><b>
<?php echo strtoupper($empInfo->firstname).' '. substr($empInfo->middlename,0,1).'. '. strtoupper($empInfo->lastname);?></b>
</div>
<div id="posseccontainer">
<b><?php echo $empInfo->position_name.' '. $empInfo->section_name;?></b>
</div>
<div id="divcontainer">
<b><?php echo $empInfo->division_name;?></b>
</div>
<div id="deptcontainer">
<b><?php echo "FOREIGN SERVICE INSTITUTE <br> DEPARTMENT OF FOREIGN AFFAIRS"?></b>
</div>
<div id="addcontainer">
<b><?php echo "5/F DFA Bldg., 2330 Roxas Blvd. <br> Pasay City 1300, Philippines"?></b>
</div>
<div>
<b>Tel. No.: <span id="showtelno"></span>
<br>
<span id="showtelno1"></span></b>
</div>
<div>
<b>Fax No.: <span id="showfaxno"></span></b>
</div>
<div>
<b>Mobile No.: <span id="showmobno"></span>
<br>
<span id="showmobno1"></span></b>
</div>
<div>
<b>Email:<span id="showemail"> <?php echo $empInfo->email;?></span>
<br>
<span id="showemail1"></span></b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<?php $this->load->view('includes/footer'); ?>
