Bonbin Bonbin - 1 month ago 5
CSS Question

Center element between another element and left side of screen (html/css)

I want to center a div between the left side of the screen and a right floated div. I want to achieve exactly what

margin:auto;
usually does, unfortunately
margin:auto;
does not work when floated elements are involved somehow.

left element (that should be centered):

.wcard{
float: left;
/* margin:auto; */
background-color: white;
border-collapse: separate;
padding: 35px;
padding-bottom: 5px;
box-shadow: 0 0 6px #b2b2b2;
}


right element:

.slidein ul {
float: right;
padding: 4px 0;
overflow: hidden;
list-style: none;
}


html:

<body>
<header>
<img id = "menu" src="static/images/menunav.png">
</header>
<div class="wcard">
</div>
<div class="slidein">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Techniques</li>
<li>About me</li>
<li></li>
</ul>
</div>
</body>


Visual representation of what i want to achieve:
enter image description here

Answer

Here's exactly what you want to achieve the idea of creating a big container then divide it into two ones and then margin:auto the div inside the one you need

  html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  header {
    width: 100%;
    height: 70px;
    background: tomato;
  }
  .container {
    width: 100%;
    height: calc(100% - 70px)
  }
  .left{
    float: left;
    background: red;
    width: 80%;
    height: 100%;
  }
  .right{
    float: left;
    background: yellow;
    width: 20%;
    height: 100%;
  }
  .centered {
    width: 100px;
    height: 100px;
    background: black;
    margin: 0 auto;
  }
<header></header>
  <div class="container">
    <div class="left">
    <div class="centered"></div>
    </div>
    <div class="right">

    </div>
  </div>

Comments