HTML, CSS Word Wrapping
I am creating a social network that allows users to post statuses on their timeline.
When the status is displayed in their timeline, the name of the person who posted it is displayed next to the status. Username is on the left and status is on the right (in several places).
If, for example, the state is 5 lines long, the other state goes down and therefore the username is not aligned with the correct state.
I tried to fix it, but nothing happened.
I don't know how to fix this, can anyone help me?
home.php:
<div class="w3-container">
<h2 style= "word-break: break-word;">
<?php
include("connect.php");
include("auth_login.php");
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
//Write the query
$sql = "SELECT body FROM posts";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<p>".$row['body']. "</p>";
}
} else {
echo "No posts";
}
?>
</h2>
<h3>
<?php
//Write the query
$sql = "SELECT username FROM posts";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<p>".$row['username']."</p>";
}
} else {
echo "";
}
$conn->close();
?>
</h3>
</div>
this is the problem I am facing:
+3
source to share
1 answer
This might be helpful. I put both of them in a div. Before doing this, I set the width of the container to 100%.
Hope it suits you :)
.w3-container {
width: 100%;
}
.w3-container .left-align {
width: 50%;
float: left;
}
.w3-container .right-align {
width: 50%;
float: right;
}
<div class="w3-container">
<div class="left-align">
<h2 style= "word-break: break-word;">
<?php
include("connect.php");
include("auth_login.php");
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
//Write the query
$sql = "SELECT body FROM posts";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<p>".$row['body']. "</p>";
}
} else {
echo "No posts";
}
?>
</h2>
</div>
<div class="right-align">
<h3>
<?php
//Write the query
$sql = "SELECT username FROM posts";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<p>".$row['username']."</p>";
}
} else {
echo "";
}
$conn->close();
?>
</h3>
</div>
</div>
0
source to share