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

Sentinel One Strikes Again. No internet connection. Uninstall Sentinel One Agent.

This happened to a co-worker of mine a while back when his test application file was marked as suspicious by Sentinel One antivirus and had his internet on his laptop disabled. Today, it happened to me without any suspicious file. Probably suspicious activity, who knows. On Microsoft Edge, it says "Hmmm... your Internet access is blocked.", "Firewall or antivirus software may have blocked the connection", and "ERR_NETWORK_ACCESS_DENIED". So, I worked with my IT to uninstall the agent, but uninstalling is not without a fight. Here are the steps that I took: Since it is a Windows 11 machine with Bitlocker, I have to first get the Bitlocker key. From command prompt run: manage-bde -protectors -get C: After I verified it is the same key that the IT has, I saved the key outside of the machine. Then go to system configuration by searching for "sysconfig" or run msconfig. Under "boot" tab, check the "Safe boot" option, then click ...
Read more

A2 Hosting Let's Encrypt Can't Install Certificate on ASP.NET Core Application

I have an ASP.NET Core app hosted by A2 Hosting. A2 Hosting provides free SSL certificate through Let's Encrypt, so I decided to install it for my application. Since the portal is by Plesk, I follow the guide in: https://support.plesk.com/hc/en-us/articles/115000165013 However, it didn't work as expected. My application still has a web.config file. After trying different ways, I commented out aspNetCore module in the web.config and then the certificate was installed successfully. By commenting the module, ASP.NET Core processing by IIS is disabled, so the validation request by Let's Encrypt is treated like a regular request towards a static file.
Read more

NuGet Package Reference NU6105 Publish Error

Some of my .NET Core applications are already using PackageReference which is a very nice idea. However, through a combination of packages, Visual Studio did not allow me to publish my project although it built fine. During publish, it threw error on NU6105 warning. Along with that most of it comes with the following message: Detected package downgrade Some developers solve it by finding which package caused the issue and manually added them through NuGet, but I find them troublesome until I found the following article: https://docs.microsoft.com/en-us/nuget/reference/errors-and-warnings/nu1605 In my case, all I need to do to solve it is to install the following NuGet package:  Microsoft.NETCore.Targets
Read more