Hi all,
I’m having some problems with the basic functionality of my code. Right now I’m just trying to display x’s or o’s on the buttons that are clicked, however whenever they are clicked and the x or o is displayed the button pops down? It’s position changes and I have no idea why. http://codepen.io/nwright/pen/YGEwWV if someone knows what’s happening please let me know! Thank you!
The issue seems to involve a combination of line-height and padding. Try removing the line height in the cell class and increasing its top padding.
Try a “float: left” in the css for your .cell class
Thanks! Worked perfect.
I have to respectfully disagree. Float should only be used to wrap text around images. Other uses tend to cause headaches down the road.
In this situation, there isn’t going to be much more formatting going on within the divs… What kind of issues would arise as far as using float?
It’s hard to say, float is pretty unpredictable, which is why it’s not best practice to use it to position elements.
There are a lot of alternatives, such as using position:relative and then assigning top and left positions, or using margins, padding, or things like text-align, depending on the situation.
Here’s an old, but great, article about the topic: https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
It’s been a looooong time since floats have been used for positioning.
Aren’t floats used by almost every css framework grid system for positioning? I think that flexbox is gradually becoming the new standard, and the css grid system is coming after that. But I think Bootstrap at least uses floats a lot.
My impression is that Bootstrap uses floats not for placement necessarily, but to enforce rows. That being said, I’m not an expert on the inner workings of Bootstrap, so take anything I say on the subject with a big grain of salt.