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: 20px20px0px20px;
	background-color: #fff;
	width:448px;
	height: 100%;
}

.message {
	width: 300px;
	padding: 12px15px12px15px;
	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><htmllang="en-GB"><head><title>- NULL -</title><linkrel="stylesheet"type="text/css"href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"type="text/css"><linkrel="stylesheet"href="css/override.css"type="text/css"></head><body><divclass="messages-wrapper"><divclass="message message-to">
			Hey man, how was your day after?
		</div><divclass="message message-to">
			Can you also bring your charger when you come round?
		</div><divclass="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: 20px20px0px20px;
	background-color: #fff;
	width:448px;
	height: 100%;
  display: flex;
  flex-direction: column;
}

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

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

.message-from {
	background-color: #ebebeb;
}
<!DOCTYPE html><htmllang="en-GB"><head><title>- NULL -</title><linkrel="stylesheet"type="text/css"href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"type="text/css"><linkrel="stylesheet"href="css/override.css"type="text/css"></head><body><divclass="messages-wrapper"><divclass="message message-to">
			Hey man, how was your day after?
		</div><divclass="message message-to">
			Can you also bring your charger when you come round?
		</div><divclass="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?"