0
I’m developing a website and it should list some specifications of a system. There are several lists of varying heights. Problem: I use the float: left in all lists. I expected the lists to adjust automatically, both right and left. But as expected, this did not happen. Follow photos for better understanding:
2
Always provide the code needed to solve the problem. The solution is to use the property display: inline-block, so all the lists would line up next to each other. Next to this, you can also use the property vertical-align to control how the placement of the lists will behave. Among several values, the most appropriate is the middle, which centrally positions an element relative to the Y axis.
Using the code you provided in your reply, I did an example in Jsfiddle: http://jsfiddle.net/hr719e5f/1/. On fullscreen to see better: https://jsfiddle.net/hr719e5f/embedded/result/
I didn’t know this vertical-align property, I’ll take a look at it. Thank you for your attention. I ended up doing it another way, to avoid these gaps between the lists. I created a div for the left and one for the right content, and float left and right. It got good but the code got dirtier than I expected.
Browser other questions tagged html css float
You are not signed in. Login or sign up in order to post.
Welcome to stackoverflow! Visit [tour] to understand how the community works! Please put the related problem code in the question also so that it is possible to identify the problem!
– Marciano.Andrade