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.

http://jsfiddle.net/j5mff/

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

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -