Streaming live at 10am (PST)

Limitation with floats


#1

Hi,

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?

tks
Rui Almeida


#2

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.


#3

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.

tks


#4

Hey that works too! Great little workaround.


#5
$('.search').css({
  'width' : $('.search').parent().width() - $('.menu').width() - $('.logo').width()
});

#6

#7