If i have 4 div(s) or 4 span(s), and each of them have a different color, and a width of 25% for each, and displaying them in the same line by using display:inline-block, question is, how can i let them in the same line(without pushing the next element down) in case of i increased the percentage of one of them. So let's say, the screen is like this ( Red Black Yellow Pink ) doesnt matter for the height, So the screen will be full of the 4 colors (on the X-axis), but if i increased, let's say, the width of the Black one up to 50%, the other 2 colors will be pushed to down, and i don't want that, i want them to move right with the X-axis, so how can i do that?
Sorry for making it that long, just wanted to be clear for all. Thank you already.
The simple answer is to set the parent to not allow word-wrapping. Inline-block elements are treated as text content with regard to the flow, so doing this will prevent them from wrapping onto the next line, even if they are too long to fit.
You may also want to set it to hide the overflow, depending on exactly what you want it to do.
So you need the following:
white-space: nowrap;
overflow: hidden;
The other option (which seems more sensible in reality) is to make sure that your elements always add up to 100%. So if you increase on to 50%, decrease the others at the same time to compensate.