Question 203021 in Html Question posted in
Some basic documentation can be found here.

Html – css add a aside div to a center div

I’v searched the SO but none is same question.

    <div class=‘container’>
    <aside class="aside-left">
        menu1
        menu2
    </aside>
    <div class="content">
        pagesssssssssssss
    </div>
    <footer>
        copyright
    </footer>
  </div>

.container {
  display: flex;
justify-content: center;
}

.aside-left {
width: 200px;
}

requirements:

  1. the content div always center in window, ignore the aside div
  2. when window width < 991px, aside display none;
  3. better use the flex not the float solution

first-item-on-center-and-second-item-at-last-in-flex is relative but the aside tag still influenced the content div

Tags:

2

Answers


  1. 0

    Not sure if I understood but try this:

    <div class="window">
    <div class="container">
        <aside class="aside-left">
            menu1
            menu2
        </aside>
        <div class="content">
            pagesssssssssssss
        </div>
        <footer>
            copyright
        </footer>
    </div>
</div>

<style>
.window {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    
}
.aside-left {
    width: 200px;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width: 990px) {
    .aside-left {
        display: none;
    }
}
</style>
    Login or Signup to reply.
  2. 0

    is that what u mean?
    i mean if u want just a one child to be centered u put justify-self: center; on him

        .container {
    display: grid;
    width: 100%;
}
.content {
    justify-self: center;
}
.aside-left {
width: 200px;
}
@media (max-width:991px) {
    .aside-left {
        display: none;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search