1

I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?

http://jsfiddle.net/C3877/9/

To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.

Note: I only care if a suggested fix works properly in Chrome.

Rhyono
  • 2,420
  • 1
  • 25
  • 41

4 Answers4

3

Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.

Inline-block fiddle: http://jsfiddle.net/C3877/8/

In addition, since you only care about Chrome, you could look into flexible boxes

A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/

Jack
  • 9,151
  • 2
  • 32
  • 44
  • inline-blocks were the way I attempted it originally, so I'm just going to have to down size the buttons to make this work. Flexible boxes look useful, though. – Rhyono Apr 19 '14 at 04:36
  • with this way, you will have the div being pushed outside of the screen. – JCBiggar Apr 19 '14 at 04:41
  • 1
    @JCBiggar Yeah, which isn't desirable either. However, one div covering the other would be even more problematic for me. The only solution for my scenario was to shrink the button. – Rhyono Apr 19 '14 at 04:44
  • I found away to use positioning with my answer. Checkout how http://jsfiddle.net/C3877/19/ – JCBiggar Apr 19 '14 at 04:45
  • Shrink it really far; the right div will overtake the left div. I would need the left div to expand vertically instead of being covered. – Rhyono Apr 19 '14 at 04:47
0

UPDATED

You could use margin and absolute positioning:

CSS

#parent_div {
    width: 100%;
    height: 10%;

        position: relative;
        min-width: 40px;

}

#left_div {
    width: 80%;
    min-width: 100px;
    height: 80%;
    float: left;
    background-color: #000;
    color: #FFF;
}

#right_div {
    width: 15%;
    min-width: 100px;
    float: right;
    background-color: blue;
     position:absolute;
        right: 0px;
}

input[type=button] {
    font-size: 2rem;
}

SEE DEMO: http://jsfiddle.net/C3877/19/

You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.

JCBiggar
  • 2,477
  • 3
  • 20
  • 33
  • 1
    Aparently all it is doing is replacing the `min-width: 100px` for `min-width: 15%` what kind of makes it work, but it no longer respect the minimal width of 100px. – Havenard Apr 19 '14 at 04:14
  • well, you would have to get rid of the min-width, to keep it side by side on a more narrow screen. Unless you changed the width of the other div. – JCBiggar Apr 19 '14 at 04:15
  • I made a mistake in the original. The button was supposed to be larger, which I've now fixed. So using your fix will result in the button going off the side of the page. – Rhyono Apr 19 '14 at 04:22
0

You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).

#right_div {
...
   margin-left:-100%;
}

Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.

King King
  • 61,710
  • 16
  • 105
  • 130
0

Appending this does the trick I suppose:

@media (max-width:515px) {
    #left_div { width: 100%; margin-right: -100px }
}
Havenard
  • 27,022
  • 5
  • 36
  • 62
  • That'll just force the button to cover part of the div. So if the left div were to have rounded edges or content, it would just be cut off. – Rhyono Apr 19 '14 at 04:30
  • Huh... no it doesn't. – Havenard Apr 19 '14 at 04:58
  • Yes it does http://puu.sh/8fHRH.png The button (right div) is going right over the left div. The left div would need to expand vertically to avoid this. – Rhyono Apr 20 '14 at 02:26
  • It is not covering the left div, it is just shrinking it. – Havenard Apr 20 '14 at 02:28
  • I added rounded corners so you can see what I mean. If it was properly resizing the left div, without covering it, the rounded corners should be visible at all times. http://jsfiddle.net/C3877/20/ Here is how it looks for me: http://puu.sh/8fIiz.png – Rhyono Apr 20 '14 at 02:32