CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert
Robert

Reputation: 10380

Margin-right not working with right floated element in bootstrap

I have a div called chat-sample with two elements, one floated to the left and the other to the right:

<div class='chat-sample'><p class='text-muted pull-left'>Did you know that there are only really 3 continets on earth? Please reply with interest for an explanation.</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>

I am trying the margin-right property on the paragraph (when there is a long message) so that the trash icon doesn't move to a new line but it doesn't work.

.chat-sample p {
    margin-right: 120px;
}

I would like the trash icon in the same position as the other messages from Boss and John Appleseed. 

.glyphicon-user {
    font-size: 25px;
    color: #3399ff;
    margin-left: 15px;
}

.panel-heading {
	position: -webkit-sticky;
  	position: -moz-sticky;
  	position: -ms-sticky;
  	position: -o-sticky;
  	position: sticky;
	width: 100%;
	z-index: 99999;
	top: 0;
}

.panel-heading h1 {
	padding-bottom: 0.65em;
	color: #3399ff;
	font-weight: bold;
}

.panel-body {
	padding: 0;
}

.col-xs-12 {
	padding-left: 0;
	padding-right: 0;
}

.chats {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.chats li {
	border-bottom: 2px solid #eee;
}

.chats a {
	display: block;
	color: #000;
	text-decoration: none;
	height: 85px;
	padding: 15px 0;
}

.chats a:hover,
.chats a:hover .glyphicon-user,
.chats a:hover .text-muted {
	background-color: #3399ff;
	color: white;
}

.chats .sender {
	margin-left: 10px;
}

.chats .timestamp {
	margin-right: 15px;
}

.chats .chat-sample {
	clear: right;
	margin-left: 50px;
	padding-top: 5px;
}

.chat-sample p {
	margin-right: 120px;
}

.chats .delete {
	margin-right: 30px;
	margin-top: 15px;
}

.chats li:last-child {
	border-bottom: none;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
		<div class='row'>
			<div class='col-sm-6 col-xs-12 col-centered'>
				<div class='panel panel-default'>
					<div class='panel-heading sticky'>
						<div class='btn-group pull-left'>
							<div class='dropdown'>
								<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
									<span class='glyphicon glyphicon-cog'</span>
								</button>
								<ul class='dropdown-menu'>
									<li><a href='#'>Delete All Chats</a></li>
									<li><a href='#'>Log Out</a></li>
								</ul>
							</div>
						</div>
						<div class='btn-group pull-right'>
							<div class='dropdown'>
								<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
									<span class='glyphicon glyphicon-plus'></span>
								</button>
								<ul class='dropdown-menu dropdown-menu-right'>
									<li><a href='#'>New Chat</a></li>
								</ul>
							</div>
						</div>
						<h1 class='panel-title text-center'>FunChat</h1>
					</div>
					<div class='panel-body'>
						<ul class='chats'>
							<li>
								<a href='#'>
									<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
									<div class='sender pull-left'><strong>John Appleseed</strong></div>
									<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
									<div class='chat-sample'><p class='text-muted pull-left'>What time is it?</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>
								</a>
							</li>
							<li>
								<a href='#'>
									<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
									<div class='sender pull-left'><strong>Teacher</strong></div>
									<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
									<div class='chat-sample'><p class='text-muted pull-left'>Did you know that there are only really 3 continets on earth? Please reply with interest for an explanation.</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>
								</a>
							</li>
							<li>
								<a href='#'>
									<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
									<div class='sender pull-left'><strong>Boss</strong></div>
									<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
									<div class='chat-sample'><p class='text-muted pull-left'>Why aren't you at work?</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div><!--end column-->
		</div><!--end row 1-->
</div><!--end container-->

Upvotes: 2

Views: 7108

Answers (2)

moonflare
moonflare

Reputation: 279

In order to avoid this kind of issue, instead of a margin-right, you can apply a fixed width to the <p> element.

.chat-sample p {
  width: <yourPreferedSize> px/%;
}

If you have a fixed size for it and want to have it responsive ready, make sure you update the width for every screen size.

UPDATED:

A piece of advice: Try to avoid fixed heights on elements, for example <a> in your code. When you have fixed width on child elements (<p> in your example) and fixed height of parent element (<a>) if the content in the <p> is really long, the design will break.

You have here the updated CSS with the fix.

Upvotes: 2

Gopalkrishna Narayan Prabhu
Gopalkrishna Narayan Prabhu

Reputation: 679

Try the following change in the css:

.chat-sample p {
   /* margin-right: 120px; */
   width: 80%;
}

Hope this helps.

Upvotes: 2

Related Questions