Bonbin Bonbin - 1 year ago 82
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

usually does, unfortunately
does not work when floated elements are involved somehow.

left element (that should be centered):

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;


<img id = "menu" src="static/images/menunav.png">
<div class="wcard">
<div class="slidein">
<li>About me</li>

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

Answer Source

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

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download