The agony of display: inline-block;

Ok, I have two div tag that I want to put side by side, so I use display: inline-block; css property.

<div style="display: inline-block; width: 30%;">...</div>
<div style="display: inline-block; width: 70%;">...</div>

I'm surprised to see there is a gap between the two divs somehow. And found out the way to fix the problem is to bring the divs together in the markup without any gap: 

<div style="display: inline-block; width: 30%;">
...</div><div style="display: inline-block; width: 70%;">...</div>

Ugly, yes, but it fixes the problem.

Edit: I have another case in which I want a gap between the two divs, so I don't bring the two divs together but I found out that somehow the second div is being put under the first one when printing. I ended up setting the second div with width of 69% so the total is 99% instead of 100% to make it work.

Comments

Post a Comment

Popular posts from this blog

AWS EC2 Can't Reach EC2 Metadata Service After Subnet Change

Just another black box day. I had to move an EC2 instance to a different subnet, so I created an AMI out of it and launch it on a different subnet. Everything went well and it has no issue reaching the internet, but apparently not everything went well. The AWS agents such as SSM agent and CodeDeploy agent in the instance stop working. After checking the logs, they can't access the EC2 metadata. Since this is a Windows Server 2019 instance, it also shows that it is not activated, which is strange. On the following article, I found out that my issue was due to the "Gateway Address doesn't match that of the current subnet". https://aws.amazon.com/premiumsupport/knowledge-center/waiting-for-metadata/ Running the suggested command fixed the issue: Import-Module c:\ProgramData\Amazon\EC2-Windows\Launch\Module\Ec2Launch.psm1 ; Add-Routes
Read more

A2 Hosting with .NET Core 2.1

Technology advances so fast and I have a new web application which I built using .NET Core 2.1. However, my current web hosting provider does not support .NET Core and I have to look for a new web hosting. Reading some forums, found out that A2 Hosting plans to install .NET Core 2.1 in their shared hosting on August 2018. So on September 5th, 2018, I signed up for a new account with them. The coupon HOSTINGFACTS that I found from a web hosting review website still works and gave me 53% one-time discount. Everything went smoothly until I found out that in my Plesk, I was unable to go higher than .NET 4.6.2. So, I decided to chat with their customer support. It took a while to get in touch with an agent, which makes sense because they have lots of customers and it was during busy hour. From the chat with their customer support, I found out that .NET Core 2.1 has indeed been installed and what is weird is I don't have to flip the .NET version in Plesk. With that information, I d...
Read more

Xcode CodeSign Incorrectly States Password is Incorrect

I was trying to create an archive in Xcode to prepare the app for testing. It requires a code signing certificate and Xcode tried to reach out to Keychain to obtain it, so it prompted me for a password to my Keychain. My first thought is since the Keychain lives in my Mac, it has to be my Mac's password, so I entered it and it failed. I re-checked the characters, re-entered and it still failed. That is odd considering I did that before without issue. I found out that my Keychain Access app was still active. I have to quit the app and then it proceeds properly. So, the solution is quit the Keychain Access app before entering password for signing.
Read more