2

The problem i'm having is i need to float one element with a fixed width to the left, and have an element next to it fill the remaining width.

The only solution that i know of is to float the first element, and then the element next to it will automatically fill the remaining width. The problem i'm having is the following:

http://codepen.io/anon/pen/udBsx

If the green content is higher than the red, it will jump down below the red. Is there any way to prevent this from happening? I've played around with clear but i don't think there's anything i can do to keep it from happening.

To make it even worse, the site is responsive. If it weren't, i could just give the green element a static width and float it as well, but that is not the case. I can't use percentage because the red element has a static width.

I believe flexbox has what i'm looking for but unfortunately it's not an option right now due to lack of support.

Ideas?

braX
  • 11,506
  • 5
  • 20
  • 33
qwerty
  • 5,166
  • 17
  • 56
  • 77
  • possible duplicate of [Expand div to max width when float:left is set](http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set) – jcjr Jun 14 '14 at 11:08

1 Answers1

3

EDIT:

The css code should look like this:

.floated {
  width:200px; float:left; 
}

.fill {
  margin-left:200px;
}
Aleks
  • 4,866
  • 3
  • 38
  • 69
  • That won't work because `.fill` should fill the remaining space of the screen, it doesn't have a static width. *Edit:* Also, what is the purpose of `.central` in your example? – qwerty Mar 07 '13 at 13:21
  • ouh, ok, one sec to modify – Aleks Mar 07 '13 at 13:22
  • Oooh, oh! That's smart, can't believe i didn't think of that. Let me test drive that before i accept it! :) – qwerty Mar 07 '13 at 13:30
  • Wow, this would have made my life so much easier if i knew this like three weeks ago. Oh well, thank you! – qwerty Mar 07 '13 at 13:33