CSS floats - how do I keep them on one line?


Tags: css,css-float,wrapping,css-tables,stretching

Problem :

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.

So 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?

example: what I want:

                                             \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /


Solution :

Wrap your floating <div>s in a container <div> 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.

    CSS Howto..

    CSS: How do I 'raise' the last photo in this page?

    How to slice an Image Border for use in CSS?

    How to expand link on hoover? Add “<” “>” symbols around link?

    CSS - how to set a position of UL in LI

    How to auto width a form element with CSS?

    How to Horizontally Scroll Images In Single Line

    How should I escape image URLs for CSS?

    How to make an interactive sidebar with jQuery and CSS3?

    jQuery How do i apply CSS to selected text

    How to disable flow around elements in table (CSS)

    How to create a table with CSS [closed]

    How to detect a smartphone through JavaScript/CSS?

    CSS - How to center an image without class or id?

    Rails 4 -how to write a view that displays instances in alternating format

    How can I create Input field over full screen, image slideshow

    css ul and li - multiple spans in each li and how to line up the spans vertically

    My sidebar is not going to right of my page, but to my left. How do I fix this?

    How do I uncollapse a margin?

    how to use css align control one row

    How to get width of div using jquery

    How to use HTMLElement.classList(.toggle)?

    How to remove background from breadCrumb

    How to put image on the top of the div?

    How to create such (see image below) effect using pure HTML JS and CSS?

    Show different forms using buttons with animation

    How do I make a hover over only take up a portion of an image as seen on gamlinwhiskeyhouse.com? [closed]

    How to make layout with fixed sized column in Liferay?

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    How to check “IF any one or all buttons are clicked” in jquery

    How to center an icon inside css shapes?