Horizontally Centering Elements to Their Container While Avoiding Overlap

In CSS, how do I horizontally center child elements, overlapping them as needed to fit in the parent's width without wrapping?

If you want to stick with a CSS-only solution, you could try out flexbox. Below I applied display: flex to the .parent which allowed the .child nodes to be flexed within .parent forcing them to equal widths. Within each child I added position: absolute to a pseudo element (could just as easily be done with a real element) to act as the actual content. In your case the card display.

* {
  box-sizing: border-box;
}

.parent {
  display: flex;
  height: 110px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: calc(100% - 96px);
  padding: 48px;
}

.child {
  position: relative;
  height: 100px;
  width: 80px;
}

.child:hover:after {
  z-index: 1;
}

.child:after {
  content: "A♠";
  position: absolute;
  border: 4px solid red;
  background: white;
  display: inline-block;
  height: 100px;
  width: 80px;
  left: 0; 
  top: 0;
  border-radius: 8px;
  z-index: 0;
}

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

How to prevent horizontal containers from overlapping or moving when screen size is reduced?

Your margins and px are making everything too exact. They're overlapping because the boxes are still following the margin rules. To make it flexible, use flexbox.

Add:

<div class="container">
  <!-- Your code -->
</div>

Make this your css:

.container{
  display:flex;
  justify-content: space-evenly;
  flex-wrap:wrap;
}
  
 #leftbox, #rightbox { 
    margin: 3% 5%;
}

If you want the boxes to not use the whole screen, add a width: 80vw; or whatever you need to the container. Try not using pixels. Ideally vw, vh, rem, or %.

Center vertically and horizontally and overlap divs in css

if you want to center vertically and horizontally a block you have to use the position:absolute property and the left, top, bottom and right statements.

i rewrited your .centerme class in order to make it works

.centerme {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

http://jsfiddle.net/o3c8768h/9/

How to prevent overlapping of text on bottom-aligned DIV element

Wouldn't it be enough to set a padding-bottom to #container?

#container {
  position: relative;
  border: 1px solid gray;
  width: 200px;
  padding-bottom: 30px; /* depending on font-size of span */
}

Double Div Centering And Overlapping Using FlexBox Only

For cross browser support, you need to use transform: translate, since browsers deal with absolute elements differently

text{
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

Stack snippet

container{    display:flex;    background: #DDD;    position: absolute;    color: rgba(0,0,0,0);    width: 300px;    height: 300px;}
svg {    margin: auto; /* CENTERSsvg graphic in the middle of container WORKS ELEGANTLY */    width: 100px;    height: 100px;    opacity:1;    fill: red;    transition: all 500ms ease;}
text{    position: absolute;    left: 0;    width: 100%;    top: 50%;    transform: translateY(-50%);    text-align: center;}
container:hover svg {    opacity: 0;}
container:hover text {    color: black;    opacity: 1;    transition: all 500ms ease;}

<a href="#">    <container>          <svg viewBox="0 0 200 200"><rect width="200" height="200" /></svg>          <text>Here Goes My Centered Text</text>             </container></a>

How do I stop these divs from overlapping?

Just remove the min-width from your CSS! And give min-width to the container with margin: auto to make it center.

Try this CSS:

#container{
    width: 70%;
    min-width: 1000px;
    margin: auto;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

Check out fiddle here: http://jsfiddle.net/UaqU7/2/

---

Related Topics