Home/ Questions/Q 4030166
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:26:14+00:00

I have one issue with floating divs. I would like to set all divs

  • 0

I have one issue with floating divs. I would like to set all divs to float:left and display all of them on the same row in the screen:

Example
A - div a "style=float:left"
B - div b "style=float:left"
C - div c "style=float:left"

As appeared on screen:

A  |  B  |   C


However, when contents in C is overflowing, it end up in the next row like this

A   |   B
C

May I know how to make div C back to the same row as div A and B regardless of how big is the content in C? I know that C is at the next row because the width is wider than the previous row can contain. How can we make div C appear as the same row with A and B regardless of how big the content in C? For my case, div C does not have a fixed width, and I dont intent to set the maximum width too. But A and B has the fixed width.

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t do it just by using floats if C doesn’t have a fixed with. However, you should be able to accomplish what you want by not setting float on C, and giving it a margin-left that equals the widths of A + B.

    By giving C a left margin, it will appear to the right of A and B (as there’s available space for it there) and, because you are not assigning it any width, it will occupy the remaining space. As a bonus, if C grows higher than A & B, it won’t move content below the other boxes.

    • 0