CODEWITHSUNDEEP
htmlcss
Irfan Mir
Irfan Mir

Reputation: 2175

make element smaller instead of having it drop to new line

In this layout I am developing, at 1124px and less in width, the green part of the header drops to a new line.

How can I get it and its contents to decrease in width as the viewport decreases in width while maintaining everything, in the header, in one line?

Right now the ratio between the pink element and the green element is that the pink takes up 20% of the header and the green takes up the remaining 80% of the width.

The input inside the green should also resize smaller in width as the its parent, the green section, does.

Here is a link to where this is happening: https://dl.dropboxusercontent.com/u/270523/help/new.html

As requested, here is a JSFiddle replicating the problem: http://jsfiddle.net/d7k43/

and the basic css:

#logo{
    height:100%;
    width:20%;
    min-width:225px;
    background:pink;
}
#input{
    height:100%;
    width:80%;
    background:green;    
}

Upvotes: 1

Views: 143

Answers (1)

thgaskell
thgaskell

Reputation: 13236

The problem is #logo { min-width: 225px }. When 0.2X = 225px, X = 1125px total width.

Your green area will still take up 80% of the total width, but the pink area's width will not shrink smaller than 225px. So when the window is less than 1125px, the pink area will take up more than 20% of the total width, which causes the green area to be pushed to a new line.

Example: 500px width window: 225px + .8*(500px) = 625px > 500px.

Upvotes: 2

Related Questions