4

Here is my jsFiddle. Despite the fact that I am applying this rule

#login {
    float: right;
}

the form will stay next to Leaderboard link. In a mobile, this is not a problem, since everything will be displayed in a one column fahsion, but in a desktop I would like the logo to be to leftmost position, the textbox and Leaderboard to be somewhere in the center and the login to the rightmost position.

What am I missing?

Notice that with the actual logo everything is fine (with regards to the logo), so ignore the ugly effect the linked logo has in the example.

gsamaras
  • 66,800
  • 33
  • 152
  • 256
  • Are you using jquery-mobile ? – w3spi Sep 09 '15 at 09:31
  • Yes @Zl3n, you can see it in the example too. – gsamaras Sep 09 '15 at 09:32
  • 1
    It is very strange indeed. – w3spi Sep 09 '15 at 09:36
  • @Zl3n yes, that's why I posted. Maybe there is something from jquery-mobile that get things complicated. Even `!important` keyword won't help. :/ – gsamaras Sep 09 '15 at 09:38
  • Would this work for you ? - http://jsfiddle.net/gsamaras/h7gxpqn0/42/ – Araknid Sep 09 '15 at 09:45
  • @Zl3n it's something, but I think it does not go all the way along the right end of the screen. Also, I can not see which is the new code in your fiddle. Maybe an upvote to the question would help to bring more people here to help! – gsamaras Sep 09 '15 at 09:46
  • @Yogita088 what u commented is the same with my link. Probably you forgot to update! – gsamaras Sep 09 '15 at 09:47
  • @gsamaras oops... here you go - http://jsfiddle.net/h7gxpqn0/44/ – Araknid Sep 09 '15 at 09:49
  • If you choose the absolute position , we must do everything in absolute ... – w3spi Sep 09 '15 at 09:50
  • @Yogita088 ZI3n is right. This will solve the problem in first sight, but when for example you go into the mobile screen it won't be aligned with the other 3 elements of the header. – gsamaras Sep 09 '15 at 09:52
  • @gsamaras sorry, don't understand why anything isn't working – w3spi Sep 09 '15 at 10:02
  • @Zl3n you did your try. Also the answer you almost gave helped me re-think somethings, but still I am not able to find a solution. You have upvoted the question though, so hopefully, this will attract humans.. :) – gsamaras Sep 09 '15 at 10:04
  • @gsamaras the best solution I can do, css changed at bottom, but position absolute is a problem http://jsfiddle.net/zlen/h7gxpqn0/45/ – w3spi Sep 09 '15 at 10:09
  • @Zl3n thanks for another good effort. Yes, because when you resize the screen to fit a mobile's one, everything get overlapped. – gsamaras Sep 09 '15 at 10:13

3 Answers3

1

You are using display: flex in the parent div .ui-block-solo. Float has no effect on flex items.

ThemesCreator
  • 1,639
  • 6
  • 21
  • 49
1

Display flex is applied to parent element (ui-block-solo). It would be better not to use display flex, float alignment and position absolute at the same time.

If you choose to keep display flex, you can use flex alignment - you can read more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

If there is float alignment and position absolute, position absolute will be applied. Furthermore if you prefer float alignment or position absolute you should use media queries for mobile devices.

gsamaras
  • 66,800
  • 33
  • 152
  • 256
Panos Telonis
  • 26
  • 2
0

Try using the grid system of Bootstrap in order to position your elements. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

For example you can have something like this: http://www.codeply.com/go/UVfJSRytc2

FYI Bootstrap's grid system is really easy to use and it saves you a lot of time from working with plain CSS. With the grid you actually split the screen in rows and columns and you can easily place your elements anywhere you want. I suggest you take a look at it for future reference :)

Rayan
  • 71
  • 1
  • 7