-2

html

<div class="cartDialog" id="cartDialog">
    <div class="formContainer"></div>
    <div class="itemsContainer"></div>
</div>

css

*{
    margin: 0;
    padding: 0;
    font-family: 'Heebo', sans-serif;
}

div.cartDialog{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 140px;
    background-color: #5e0d0d;
}

div.cartDialog .formContainer{
    display: inline-block;
    height: 140px;
    width: 200px;
    background-color: black;

}

div.cartDialog .itemsContainer{
    display: inline-block;
    height: 140px;
    width: calc(100vw - 205px);
    background-color: green;
}

It's apper like there is some space between formContainer and ItemsContainer. can you tell me why is that and how can I remove it. you can see in the ItemContainer css that the wid th is calc(100vw - 205px) even though formContainer width is 200. the reason for that is it looks like the space is a part of the width of formContainer and when I set the width calc(100vw - 200px) itemsContainer go to the next line.

https://i.stack.imgur.com/RSwYN.png

FridregJohn
  • 59
  • 6
  • Here is the result when I change it to calc(100vw - 200px); https://prnt.sc/11927na – FridregJohn Apr 10 '21 at 16:40
  • Thai is just a `whitespace` put your both `divs` `
    ` on single line with out any line-breaks or you can use `div.cartDialog{......;display: flex;}` to fix this issue.     – Sayog Apr 10 '21 at 16:56

1 Answers1

1

Because I used inline-block there is a default space between the divs.

to remove it you can set to div.cartDialog font-size: 0;

FridregJohn
  • 59
  • 6