html - How to get an element centered while a floated element is next to it? -
i have element want centered relative page, while having floated element inline it.
html:
<div class="container"> <span class="centerme">i should centered</span> <span class="ontheright">i'm on right!</span> </div>
css:
.container{ text-align:center } .centerme{ margin-left:auto; margin-right:auto; } .ontheright{float:right;}
the problem centered element centered relative space left over, after floated element uses up. want center relative full width of container. have tried using position:absolute
instead of float, collides when screen small.
you set relative positioning center-me div define left property:
.centerme { margin-left:auto; margin-right:auto; position: relative; left: 70px; }
for problem colliding on small screen widths, use media query:
@media screen , (max-width: 320px) { .ontheright { float: none; top: 20px; } }
be sure include meta viewport tag in html media queries.
here fiddle
Comments
Post a Comment