CODEWITHSUNDEEP
htmlcsscss-transforms
markusand
markusand

Reputation: 325

Element width when transform: translate()

I'm absolute positioning a ul list (but could be any element) at the bottom center of a container. When window or container is resized, the list shrinks as if it was some kind of margin or padding or max-width applied somewhere. See this fiddle.

Desired effect I need the list to keep an auto width (depending on its content) and only shrinks when it takes more than 100% of the parent's width.

I've noticed this behavior only happens when transform: translateX(-50%).

EDIT The wrapper div contains other elements. List acts as a navigation menu or toolbox.

HTML

<div id="wrapper">

  <p>Whatever other content</p>

  <ul id="list">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  background: #fff;
}

#list {
  list-style: none;
  position: absolute;
  padding: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0;
  background: #555;
}

#list li {
  display: inline-block;
  margin: 1px;
}

#list span {
  display: block;
  height: 40px;
  width: 40px;
  background: #222;
}

Upvotes: 1

Views: 3037

Answers (1)

Alex C
Alex C

Reputation: 526

You can use flexbox to replace the old absolute way of positioning. 

#wrapper {
  background: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
#list {
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: flex-end;
  margin: 0 auto;
  border: 1px solid #222;
}

I updated the fiddle http://jsfiddle.net/uLj5raoq/

Upvotes: 1

Related Questions