CSS Float on resize: unwanted pushdown of element (cause of margin/padding) (responsive design)

Question

I have following problem:

My header consists of the menu, some news sliding with flexslider and a search input:

The problem: when I manually RESIZE the browser, or reload it with smaller width; the right element jumps down (pushdown because no space left)

Here is a small test:

http://jsfiddle.net/FFVzh/

Does someone know a solution for this? The header should be responsive, without pushdown of right element.

hope you can help

score 0 · Answer 1 · answered Oct 16 '12 at 12:36

0

It's because you have set your margin for the right element in pixels, you need to use % and it will work, otherwise use padding instead of margin an box-sizing:border-box

answered Oct 16 '12 at 12:36

Caelea

2,318
15
22

score 0 · Accepted Answer · answered Oct 16 '12 at 12:37

0

If you use a percentage for the horizontal component of the #right margin, the margin will scale with the width of the window.

#right {
  background:yellow;
  float:right;
  width:18%;
  margin: 10px 1% 3px 0;
}

answered Oct 16 '12 at 12:37

kaezarrex

1,246
11
8

hey, thanks for the quick answer; on my demo it works, but on my real code, a percentage margin / padding doensn't do the trick :( it still jumps because no space is available :( – Fl0R1D3R Oct 16 '12 at 12:48
however, i fixed it now, but now the #right element becomes much smaller than the left one, do you know why? – Fl0R1D3R Oct 16 '12 at 12:52

CSS Float on resize: unwanted pushdown of element (cause of margin/padding) (responsive design)

2 Answers2