CODEWITHSUNDEEP
htmlcss
Bonbin
Bonbin

Reputation: 305

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

Upvotes: 1

Views: 326

Answers (4)

zer00ne
zer00ne

Reputation: 43880

In order to "center" .wcard add:

margin-top: calc(25vh - 40px);
margin-left: calc(50vw - 70px);

If it's not in the position you want you can easily position .wcard by adjusting the margins. Note that vw and vh are used to make it responsive. Details are commented in Snippet

SNIPPET

/* This is just for help us visualize where each element is */

* {
  outline: 1px solid black;
}
/* border-collapse is a table property */

.wcard {
  float: left;
  /* margin:auto; */
  background-color: white;
  /*border-collapse: separate;*/
  padding: 35px;
  padding-bottom: 5px;
  box-shadow: 0 0 6px #b2b2b2;
  /* Using margins and calc to determine offset */
  margin-top: calc(25vh - 40px);
  margin-left: calc(50vw - 70px);
}
.slidein {
  float: right;
  padding: 4px 0;
  overflow: hidden;
  list-style: none;
}
<body>
  <header>
    <img id="menu" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width='50'>
  </header>

  <div class="wcard">wCard
  </div>
  <!-- Removed the outer div as it seems unnecessary -->
  <ul class="slidein">
    <li>Home</li>
    <li>Projects</li>
    <li>Techniques</li>
    <li>About me</li>
    <li></li>
  </ul>

</body>

Upvotes: 1

solimanware
solimanware

Reputation: 3051

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>

Upvotes: 1

Edmar Miyake
Edmar Miyake

Reputation: 12390

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


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


main {
  float: left;
  width: 80%;
  text-align: center;
}

nav {
  float: right;
  width: 20%;
}
<body>
    <header>
        <img id = "menu" src="static/images/menunav.png">
    </header>
  
    <main>
      <div class="wcard">
        this should be centered
      </div>
    </main>
  
    <nav class="slidein">
      <ul>
          <li>Home</li>
          <li>Projects</li>
          <li>Techniques</li>
          <li>About me</li>
          <li></li>
      </ul>
    </nav>
  </body>

Upvotes: 1

ZombieChowder
ZombieChowder

Reputation: 1204

I think that this is what you are trying to achieve. I started answering your question before you posted the html code so I created everything from scratch. I would advice you to use Bootstrap so you can mage your web page a bit more responsive.

This is for the floating left image:

#left{
  width:50%;
  margin-left:20%;
  margin-top:10%;
}

The entire thing can be seen in this JS Fiddle: Solution #1

Upvotes: 1

Related Questions