Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Floating Div Right Without Allowing The Div After To Move Up?

Post a Comment
I may be using the wrong terminology, I apologize. But I'm trying to code a messaging UI and when I float the senders messages to the right, the messages to the sender get pushed u

Solution 1:

You can add clear:both to your message boxes

html, body {
	background-color: red !important;
	height: 100%;
}

.messages-wrapper {
	padding: 20px 20px 0px 20px;
	background-color: #fff;
	width:448px;
	height: 100%;
}

.message {
	width: 300px;
	padding: 12px 15px 12px 15px;
	border-radius: 3px;
	margin-top:10px;
  clear:both;
}

.message-to {
	background-color: #2C7CFF;
	color: #fff;
	float: right;
}

.message-from {
	background-color: #ebebeb;
  float: left;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title>- NULL -</title>
	<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css/override.css" type="text/css">
</head>
<body>
	<div class="messages-wrapper">
		<div class="message message-to">
			Hey man, how was your day after?
		</div>
		<div class="message message-to">
			Can you also bring your charger when you come round?
		</div>
		<div class="message message-from">
			It was alright, I'll tell you all about it later! No problem, I'm on my way now.
		</div>
	</div>
</body>
</html>

Solution 2: 

html, body {
	background-color: red !important;
	height: 100%;
}

.messages-wrapper {
	padding: 20px 20px 0px 20px;
	background-color: #fff;
	width:448px;
	height: 100%;
  display: flex;
  flex-direction: column;
}

.message {
	width: 300px;
	padding: 12px 15px 12px 15px;
	border-radius: 3px;
	margin-top:10px;
}

.message-to {
	background-color: #2C7CFF;
	color: #fff;
	float:right;
}

.message-from {
	background-color: #ebebeb;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title>- NULL -</title>
	<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css/override.css" type="text/css">
</head>
<body>
	<div class="messages-wrapper">
		<div class="message message-to">
			Hey man, how was your day after?
		</div>
		<div class="message message-to">
			Can you also bring your charger when you come round?
		</div>
		<div class="message message-from">
			It was alright, I'll tell you all about it later! No problem, I'm on my way now.
		</div>
	</div>
</body>
</html>

Post a Comment for "Floating Div Right Without Allowing The Div After To Move Up?"