Center floated right element when second is floated right?

Mixtext - SPANs expand to the size of their CONTENTS, so text-align:center is meaningless. There is no white-space in the element, so the text will always be "centered" in its wrapper.

Up vote 1 down vote favorite share g+ share fb share tw.

I'm adding fixed bar on the bottom of page, first I have 100% width fixed container, which contains 2 elements. First one is the content and second one closes the bar. I want first element, i.e.

"mixtext" to be centered in the bar, and second element, close button to be always on right, and I want them to be on the same line. Can you suggest how can I do that? Here is the HTML code: Text that needs to be centered within the space from left to the next element And CSS: #mixwrap { left: 0; bottom: 0; position: fixed; width: 100%; background: #555; color: white; } #mixtext { text-align: center; padding: 8px; font-family: MetaBold, "Trebuchet MS", sans-serif; float: left; } #mixclose { cursor: pointer; float: right; } Also, I want to remember user's choice, when someone clicks close button, js just sets display:none for element, but when user navigates to other page, div is showing again.

How can I hide it so user won't see it after navigating to other page? Thanks in advance. Javascript css float center link|improve this question edited Jan 18 at 22:22Anders Lien31026 asked Jan 18 at 21:20George Lubaretsi61.

Mixtext - SPANs expand to the size of their CONTENTS, so text-align:center is meaningless. There is no white-space in the element, so the text will always be "centered" in its wrapper. #mixtext need to be a DIV in order to contain white-space.

DIVs expand to take up the width of their CONTAINER, so it will become 100% wide unless told otherwise. You need to give #mixtext a WIDTH to give your button some space. Because you have float:left on #mixtext, the container of the text will always be on the left of the screen, not centered.

To center the DIV, since there is no such thing as float:center, we need to use margins to center it. This uses the "negative margin centering trick" Here's what we end up with: jsfiddle.net/Diodeus/74m9C/1/ #mixtext { text-align: center; padding: 8px; font-family: MetaBold, "Trebuchet MS", sans-serif; width:600px; position:relative; float:left; left:50%; margin-left:-300px; border:1px solid #ff0000; }.

Swap the position of #mixclose and #mixtext, and change them to divs: Text that needs to be centered within the space from left to the next element and remove the float: left from the #mixtext css: #mixtext { text-align: center; padding: 8px; font-family: MetaBold, "Trebuchet MS", sans-serif; } Now #mixtext will expand to 100% of it's available space, and #mixclose will float to the right. Edit: In regards to your last question, to remember the users setting to display #mixtext or not, you would have to either use cookies or a server side language.

Try this: Text that needs to be centered within the space from left to the next element As for removing the element and keeping it removed, you need code that will examine postback and then check for the element to see if its there.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.