I tried to accomplish the following task in CSS, but I don't think CSS can do it alone. It looks to me like a jQuery candidate, but I thought I'd check for ideas here...
I have a header DIV at the top of a website (currently in DEV environment).
It looks like:
- <div id="container">
- <div id="left">logo</div>
-
- <div id="center">fixed search area</div>
- <div id="right">Variable length text</div>
- </div>
Here's what I'm trying to accomplish:
1) I want the "center" DIV to be in a fixed center position, so it's directly in the middle of the container.
This is very easy to do with CSS and works. BUT...
2) The text in the "right" div is of variable-length(dynamic user information) and about 10% percent of the time, the text in the "right" div will be very long, pushing into the fixed-position center div and causing the right div content to spill into the body. The other 90% of the time, even though the right div changes width, the center div can stay where it is and not be affected.
It's this 10% of the time I want to be able to push the "center" div to the left (there is space between the "center" and "left" divs) to accommodate for the long text pushing against it from the "right" div.
I can't do a text-align:center on the "center" div because of the variable-length text in the "right" div.
It seems to me like I'd need to dynamically change properties of the center div to get this done. Does this sound like a task for jQuery?
Thanks for ideas...