0

So I am having some issues with my divs are not correctly aligned, which will need to be fit pretty good. I am using pug as a template.

PUG:

  body
    .container
      .header
        include game_components/header.pug
      .game-row
        include game_components/game-row.pug
      .footer
        include game_components/footer.pug

Header: 

doctype html
html(lang="en")
  .logo
    span PLH
  .user-info
    span PLH

Game-Row:

doctype html
html(lang="en")
  .side-bar
    span PLH
  .action-scene
    span PLH

Footer:

doctype html
html(lang="en")
  .chat
    span Chat PLH

CSS:

* {
   background-color: grey;
   border-radius: 10px;
}
.container {
    width: 80%;
    margin: 1px;
    margin: auto;
}

.header, .game-row, .footer {
    display: block;
}

.logo, .user-info, .side-bar, .action-scene, .chat {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    margin: 0.2em;
    border:  1px solid gold;
}

.logo, .user-info {
    height: 5em;
}

.logo, .side-bar {
    width:  10%;
}

.user-info, .action-scene {
    width:  85.45%;
}

.side-bar, .action-scene {
    height: 20em;
}

.chat {
    width: 100%;
    height: 15em;
}

Picture of what it currently looks like: http://prntscr.com/lvblcb (LightShot Link)

If you look you can see the chat fits it perfectly, as it should. But I am having trouble the first two rows fitting in nicely.

ecg8
  • 1,362
  • 1
  • 12
  • 16
William
  • 1,175
  • 2
  • 17
  • 32
  • Given that the `logo/sidebar` and `user/action` summed width (10 + 85.45) is 95.45% compared to `chat` being 100%, of course they do not match. – Asons Dec 15 '18 at 17:59
  • if i make it equal to 100% it line breaks – William Dec 16 '18 at 05:55
  • - on a side note, I fixed it by making everything work on percentages, and having negative margin and padding values. (5 minute rule to edit is lame) – William Dec 16 '18 at 06:03
  • this is happening due to display:inline-block; check my solution below – Atul Rajput Dec 16 '18 at 07:48
  • Lookup `flexbox`. It might be useful for you to solve various alignment issues. Once you know it, you can't live without it. – Ruby Racer Dec 16 '18 at 08:21

1 Answers1

0

The problem you are having is due to display:inline-block, I have multiple solution for the same. You can try any of these: 1. use float:left in-spite of display:inline-block and give them the width like 90% and 10%, this will be solved, and yes to their parent don't forget to give overflow hidden.

  1. if you want to use display: inline-block; then give its parent font-size: 0; and inner span font size whatever you want, then provide them the proper width:

Use this and if you feel ny problem please let me know/

Atul Rajput
  • 4,073
  • 2
  • 12
  • 24
  • Okay, so I've done this and it seems to not really have fixed the problem. IT made it much better, but still not fixed. – William Dec 21 '18 at 05:47