Question

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:

<div id="mixwrap">
  <span id="mixtext">
    [Text that needs to be centered within the space from left to the next element]
  </span>
  <span id="mixclose">
    <input type="button" id="mixclosebut" onclick="document.getElementById('mixwrap').style.display = 'none';">
  </span>
</div>

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.

Answer 1

Swap the position of #mixclose and #mixtext, and change them to divs:

<div id="mixwrap">
  <div id="mixclose"><input type="button" id="mixclosebut"
       value="Test" onclick="document.getElementById('mixwrap').style.display = 'none';">
  </div>

  <div id="mixtext">
    [Text that needs to be centered within the space from left to the next element]
  </div>
</div>

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.