CODEWITHSUNDEEP
htmlcssgoogle-chrome
Rhyono
Rhyono

Reputation: 2468

Force divs to be on the same line

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.

Upvotes: 1

Views: 3174

Answers (4)

JCBiggar
JCBiggar

Reputation: 2507

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.

Upvotes: 0

Havenard
Havenard

Reputation: 27934

Appending this does the trick I suppose:

@media (max-width:515px) {
    #left_div { width: 100%; margin-right: -100px }
}

Upvotes: 0

King King
King King

Reputation: 63387

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.

Upvotes: 0

Jack
Jack

Reputation: 9388

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/

Upvotes: 3

Related Questions