How do I keep CSS floats in one line

Question

I want to have two items on the same line using float  left for the item on the left   I have no problems achieving this alone  The problem is  I want the two items to stay on the same line even when you resize the browser very small  You know    like how it was with tables   The goal is to keep the item on the right from wrapping no matter what   How to I tell the browser using CSS that I would rather stretch the containing div than wrap it so the the float  right  div is below the float  left  div   what I want                                          ---------------    ------------------------     float  left        float  right                                                                                 content stretching          Screen Edge                      the div off the screen      lt ---   ---------------    ------------------------

User · Answer

When user reduces window size horizontally and this causes floats to stack vertically  remove the floats and on the second div  that was a float  use margin-top  -123px  your value  and margin-left  444px  your value  to position the divs as they appeared with floats  When done this way  when the window narrows  the right-side div stays in place and disappears when page is too narrow to include it       which  to me  is better than having the right-side div  jump  down below the left-side div when the browser window is narrowed by the user

User · Answer

Another option  Do not float your right column  just give it a left margin to move it beyond the float  You ll need a hack or two to fix IE6  but that s the basic idea

User · Answer

Another option is  instead of floating  to set the white-space property nowrap to a parent div    parent        white-space  nowrap      and reset the white-space and use an inline-block display so the divs stay on the same line but you can still give it a width    child       display inline-block      width 300px      white-space  normal      Here is a JSFiddle  https   jsfiddle net 9g8ud31o

User · Answer

Wrap your floating  lt div gt s in a container  lt div gt  that uses this cross-browser min-width hack    minwidth   min-width 100px  width  auto  important  width  100px      You may also need to set  overflow  but probably not   This works because    The  important declaration  combined with min-width cause everything to stay on the same line in IE7  IE6 does not implement min-width  but it has a bug such that width  100px overrides the  important declaration  causing the container width to be 100px

User · Answer

Solution 1  display table-cell  not widely supported  Solution 2  tables   I hate hacks

User · Answer

Solution 1  display table-cell  not widely supported  Solution 2  tables   I hate hacks

User · Answer

The way I got around this was to use some jQuery   The reason I did it this way was because A and B were percent widths   HTML    lt div class  floatNoWrap  gt       lt div id  A  style  float  left   gt          Content A      lt  div gt       lt div id  B  style  float  left   gt          Content B      lt  div gt       lt div style  clear  both   gt  lt  div gt   lt  div gt    CSS    floatNoWrap       width  100       height  100       jQuery       class   floatNoWrap     each function            this  css  width     this  outerWidth

User · Answer

Add this line to your floated element selector   floated       float  left              box-sizing  border-box      It will prevent padding and borders to be added to width  so element always stay in row  even if you have eg  three elements with width of 33 33333

User · Answer

Another option is  instead of floating  to set the white-space property nowrap to a parent div    parent        white-space  nowrap      and reset the white-space and use an inline-block display so the divs stay on the same line but you can still give it a width    child       display inline-block      width 300px      white-space  normal      Here is a JSFiddle  https   jsfiddle net 9g8ud31o

User · Answer

Are you sure that floated block-level elements are the best solution to this problem    Often with CSS difficulties in my experience it turns out that the reason I can t see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup   thinking  how can I make these elements do this     rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that

User · Answer

The way I got around this was to use some jQuery   The reason I did it this way was because A and B were percent widths   HTML    lt div class  floatNoWrap  gt       lt div id  A  style  float  left   gt          Content A      lt  div gt       lt div id  B  style  float  left   gt          Content B      lt  div gt       lt div style  clear  both   gt  lt  div gt   lt  div gt    CSS    floatNoWrap       width  100       height  100       jQuery       class   floatNoWrap     each function            this  css  width     this  outerWidth

User · Answer

When user reduces window size horizontally and this causes floats to stack vertically  remove the floats and on the second div  that was a float  use margin-top  -123px  your value  and margin-left  444px  your value  to position the divs as they appeared with floats  When done this way  when the window narrows  the right-side div stays in place and disappears when page is too narrow to include it       which  to me  is better than having the right-side div  jump  down below the left-side div when the browser window is narrowed by the user

User · Answer

Add this line to your floated element selector   floated       float  left              box-sizing  border-box      It will prevent padding and borders to be added to width  so element always stay in row  even if you have eg  three elements with width of 33 33333

User · Answer

i d recommend using tables for this problem  i m having a similar issue and as long as the table is just used to display some data and not for the main page layout it is fine

User · Answer

Wrap your floating  lt div gt s in a container  lt div gt  that uses this cross-browser min-width hack    minwidth   min-width 100px  width  auto  important  width  100px      You may also need to set  overflow  but probably not   This works because    The  important declaration  combined with min-width cause everything to stay on the same line in IE7  IE6 does not implement min-width  but it has a bug such that width  100px overrides the  important declaration  causing the container width to be 100px

User · Answer

Wrap your floating  lt div gt s in a container  lt div gt  that uses this cross-browser min-width hack    minwidth   min-width 100px  width  auto  important  width  100px      You may also need to set  overflow  but probably not   This works because    The  important declaration  combined with min-width cause everything to stay on the same line in IE7  IE6 does not implement min-width  but it has a bug such that width  100px overrides the  important declaration  causing the container width to be 100px

User · Answer

Another option  Do not float your right column  just give it a left margin to move it beyond the float  You ll need a hack or two to fix IE6  but that s the basic idea

User · Answer

Another option  Do not float your right column  just give it a left margin to move it beyond the float  You ll need a hack or two to fix IE6  but that s the basic idea

User · Answer

Wrap your floaters in a div with a min-width greater than the combined width margin of the floaters   No hacks or HTML tables needed

User · Answer

Wrap your floating  lt div gt s in a container  lt div gt  that uses this cross-browser min-width hack    minwidth   min-width 100px  width  auto  important  width  100px      You may also need to set  overflow  but probably not   This works because    The  important declaration  combined with min-width cause everything to stay on the same line in IE7  IE6 does not implement min-width  but it has a bug such that width  100px overrides the  important declaration  causing the container width to be 100px

User · Answer

Are you sure that floated block-level elements are the best solution to this problem    Often with CSS difficulties in my experience it turns out that the reason I can t see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup   thinking  how can I make these elements do this     rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that

User · Answer

Another option  Do not float your right column  just give it a left margin to move it beyond the float  You ll need a hack or two to fix IE6  but that s the basic idea

User · Answer

Wrap your floaters in a div with a min-width greater than the combined width margin of the floaters   No hacks or HTML tables needed

User · Answer

Solution 1  display table-cell  not widely supported  Solution 2  tables   I hate hacks

User · Answer

Solution 1  display table-cell  not widely supported  Solution 2  tables   I hate hacks

User · Answer

Are you sure that floated block-level elements are the best solution to this problem    Often with CSS difficulties in my experience it turns out that the reason I can t see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup   thinking  how can I make these elements do this     rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that

User · Answer

Are you sure that floated block-level elements are the best solution to this problem    Often with CSS difficulties in my experience it turns out that the reason I can t see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup   thinking  how can I make these elements do this     rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that

User · Answer

i d recommend using tables for this problem  i m having a similar issue and as long as the table is just used to display some data and not for the main page layout it is fine

[css] How do I keep CSS floats in one line?

Examples related to css

Examples related to css-float

Examples related to css-tables

Examples related to stretching