How to get an element centered while a floated element is next to it?

Question

I have an element that I want centered relative to the page, while having a floated element inline with it.

Html:

<div class="container">
  <span class="centerMe">I should be centered</span>
  <span class="ontheright">I'm on the right!</span>
</div>

CSS:

.container{ text-align:center }
.centerMe{
  margin-left:auto;
  margin-right:auto;
}
.ontheright{float:right;}

The problem is that the centered element is centered relative to the space left over, after the floated element uses it up. I want it to center relative to the full width of the container. I have tried using position:absolute instead of float, but then it collides when the screen is too small.

http://jsfiddle.net/j5Mff/

You are using an ``span`` which is an inline element. To center an element with ``margin: auto;`` the element needs to be set to ``display: block;`` and have a defined ``width``. For more information more [info](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally?rq=1) — Nick Tomlin, Aug 07 '13 at 21:33
@NickTomlin has the answer. ``float: right;`` will implicate ``display: block;``, so just set a width and block display on ``.centerMe`` and you're fine. — Alexander Wallin, Aug 07 '13 at 21:39

Sean Kendle · Answer 1 · 2013-11-05T15:36:11.527

1

You could put a left margin on the right-floated element of -100%.

Here's my answer in a forked version of that fiddle:

http://jsfiddle.net/frKET/1/

.container {
    position:relative;
    text-align:center
}
.centerMe {
    margin-left:auto;
    margin-right:auto;
}
.ontheright {
    float: right;
    margin-left: -100%;
}

edited Nov 05 '13 at 15:36

answered Aug 07 '13 at 21:32

Sean Kendle

3,538
1
27
34

The width of the element varies/is unknown. – Shelvacu Aug 07 '13 at 21:37
However, after messing around a bit, it doesn't matter as long as the negative margin is greater than or equal to the width. `margin-left:-9001px` should work – Shelvacu Aug 07 '13 at 21:40
If you know the width of the center element, you could make that absolutely positioned, left: 50%, margin-left: -(half the width of the element)... – Sean Kendle Aug 07 '13 at 21:44
Yet both solutions cause the same problem of overlaps on screens with just the right(wrong?) width – Shelvacu Aug 07 '13 at 21:50
You should use media queries, as the previous poster suggested, to avoid that. My phone is a POS and it's 320 pixels wide at the slimmest, so use that number as the smallest your site should need to be. If they are overlapping, use a different style sheet to fix that. Inside a style sheet: @media screen and (max-width: 480px){ – Sean Kendle Aug 08 '13 at 03:45
Are you using Firefox to develop? I would highly recommend that, or Chrome. Firebug can be your hero for life. – Sean Kendle Aug 08 '13 at 03:47
Yes, both. Mainly chrome, but also often testing on firefox as well. I know what you mean. – Shelvacu Aug 08 '13 at 21:41
Are you familiar with media queries in CSS? Also, do you use JQuery? I recommend both... they're the future of the internet, at least until someone comes up with something better, or CSS continues to improve (as it seems to be, CSS animations!? Animated PNGs!? Multiple backgrounds!? Nuts.) (http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/) – Sean Kendle Aug 09 '13 at 02:09

score 1 · Accepted Answer · answered Aug 07 '13 at 21:39

You could also set relative positioning to the center-me div so that you could define a left property:

.centerMe {
margin-left:auto;
margin-right:auto;
position: relative;
left: 70px;
}

For your problem with colliding on small screen widths, you could use a media query:

@media screen and (max-width: 320px) {
.ontheright {
    float: none;
    top: 20px;
}
}

Be sure to include the meta viewport tag in your HTML for media queries.

Here is a fiddle

score 0 · Answer 3 · answered Aug 07 '13 at 21:33

You could always change the float element to absolute positioning if it's always going to be at the top.

http://jsfiddle.net/j5Mff/1/

.container {
    position:relative;
    text-align:center
}
.centerMe {
    margin-left:auto;
    margin-right:auto;
}
.ontheright {
    position:absolute;
    top:0;
    right:0;
}

How to get an element centered while a floated element is next to it?

3 Answers3