Can't get float items to align to the right

HTML & CSS
1

Hi,

I have the following code which I would like to display the logo to the left in it’s own div, and 4 other items to the right of the logo and aligned to the right. However, I can’t get the items on the right hand side to align to the right.

<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="col-logo">
					LOGO
					</div>
				</div>
				
				<div class="col-md-6 text-right">
					<div class="col-categories">
						Categories
					</div>

					<div class="col-search">
						S
					</div>

					<div class="col-button">
						<a href="#" class="button">Button</a>
					</div>

					<div class="col-menu">
						menu icon
					</div>
				</div>
				
			</div>

.col-menu{
	float: left;
	margin-left: 15px;
}
.col-button{
	float: left;
	margin-left: 15px;
}
.col-search{
	float: left;
	margin-left: 15px;
}
.col-categories{
	float: left;
	margin-left: 15px;
}
.col-logo{
	float: left;
}

I am using Bootstrap 4 so the text-right normally aligns everything to the right, but it’s not in this case.

On a side note, would it be better if I created this using flex rather than floats?

Thanks

2

Probably.
Or don’t float everything. You could just float the logo, then the other elements are inline-block aligned to the right.

1 Like
3

Ok, I’ve tried to do it using flex.

This is what I have:

Is there a way I can align the logo to the left and then the other items to the right?

I’m very new to flex :no_mouth:

4

Yes just use an auto margin on the logo to push it all the way across.

e.g.

.col-logo {
  order: 5;
  margin-left: 15px;
  margin-right:auto;
}
1 Like
5

Did you try @SamA74’s suggestion?


.container{
    text-align:right;
}
.col-menu,
.col-button,
.col-search,
.col-categories{
    display:inline-block;
    margin-left: 15px;
}
.col-logo{
    float: left;
}
2 Likes
6

You can get rid of nearly all those rules and just use this in your fiddle.

.container-nav {display: flex;}
.container-nav > div{margin-left:15px;}
.container-nav > .col-logo { margin:0 auto 0 0;}
2 Likes
7

Thanks, PaulOB, that worked perfectly. I like the way flex works :slight_smile: I’m new to it, but really like it.

Thanks again

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.