Streaming live at 10am (PST)

Limitation with floats


I´m having some problems floating div´s.

I have a main div that has 100% with. Inside this div i have:

  • Logo div -> fixed with = 200px
  • Search div -> with = 100%
  • menu div -> fixed with = 500px

well, my problem is the search bar, i want it to be 100% all the way to the menu, but i can do that? Does anyone have a solution?

Rui Almeida

Floats don’t play nice with mixing pixel and percent values. When you set 100% it will fill 100% of the parent element, not the space of the parent element container minus total pixel elements.

I would try to make all the floated div’s be percent based. Here is also another solution, but won’t work with three divs.

Tks for the tip thesergie

I found a different way to do it.
The search bar, i change the position to absolute and give a padding left 200px and padding right 500px.


Hey that works too! Great little workaround.

  'width' : $('.search').parent().width() - $('.menu').width() - $('.logo').width()