Putting 2 HTML Elements Side by Side

Many times I have to battle on which methods are the best in putting two HTML elements side-by-side. Let say we have the following elements:

<div class="Container">
   <div class="LeftColumn"></div>
   <div class="RightColumn"></div>
</div>

Based on my own experience and preference, I usually use one of these 3 css options. For clarification, they are by no means comprehensive ways to style two elements nor the points are meant to capture all possibilities.

Option 1:

.LeftColumn, .RightColumn {
   display:inline-block;
   width: 50%;
}

Option 2:

.LeftColumn {
   float: left;
}
.RightColumn {
   float: right;
}

Option 3:
.Container { display: flex; flex-direction: row; justify-content: space-between; }

Each option has its own characteristics.

Option 1:

• It will create a gap between the two elements.
• If browser is shrinked width-wise, the second element will not be automatically wrapped.

Option 2:

• The first element will be anchored to the left and the second element will be anchored to the right.
• To prevent the next element from being rendered unexpected, a third element with css property of clear: both is needed.
• If browser is shrinked width-wise, the second element will be placed underneath the first.
• vertical-align property and some other properties have no effect.

Option 3:

• Same points as option 2 but without the need of the third element.
• New CSS 3 properties but it has more ways for customization.

Import Text Files with Garbage Characters

I had a case in which we use VB.NET to import a text file and it didn't work properly. My code at first was:

Dim someString As String = Encoding.ASCII.GetString(someByteArray)

After researching for a while, I found out that the text file is encoded using UTF-8. Thus, switching it to the following code make it work properly:

Dim someString As String = Encoding.UTF8.GetString(someByteArray)

Encoding matters!

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.

Autocomplete and Radio Button

When I created my web page, I noticed that the state of my radio buttons stays when I navigated away to another page and then back to the same page. I was confused at first and quickly found out that by default the browser (in my case, firefox) has autocomplete enabled by default and was saving the state somehow. Quick search online allow me to turn the feature on/off by adding autocomplete attribute.

<input type="radio" autocomplete="off"/>

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

HTML Object Tag and Silverlight Plugin Reload

I have a Silverlight plugin that I don't want it to be refreshed or reloaded. But in my case, it always reloaded itself though nothing on the page caused a postback. Later on, I found out that I have a javascript code that hide and show the container of the plugin (div with id of someDiv in the code below).

<div id="someDiv">
  <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
       ...
   </object>
</div>

Apparently that causes the object tag to reload the plugin. My workaround thus is to set the height of the object tag to 0 px, that solves the problem.

ASP.Net Membership, Create User and Invalid Email. What?

I was testing ASP.Net Membership user registration logic in my server. It runs fine till it throws "The E-mail supplied is invalid" error. Weird thing is I found out that all my data are correct through debugging and double checking my entry. Quick search says that requiresUniqueEmail attribute on Membership provider tag set to true is the problem. Ironically, I only have one email in the database.

Brushing my confusion aside, I remove the attribute, but it still doesn't work. And eventually found out that setting requiresUniqueEmail="false" fixed the whole thing.

Later on I also found out that by default, the attribute has value of true. That explains why removing the attribute doesn't work.

https://msdn.microsoft.com/en-us/library/system.web.security.membershipprovider.requiresuniqueemail(v=vs.110).aspx

I have yet found out why it doesn't work when it has true value and no data in the database. Hopefully one day when I have time to dig deeper.