Fixed size left column and fluid right column both with 100% height in CSS
If you need two (2) columns and want the left column to be a fixed size, but the right column to automatically take the remaining size of the window, …
Read Article →CSS
14 articles about css development, tools, and best practices
How to Flex Grid 2 Columns using CSS
If you would like to flex grid 2 columns in CSS then you need three (3) divs.
Step 1 – Set your HTML template
Create some HTML with this layout. …
Read Article →How to Style an Element using Javascript
If you need to style an element using Javascript then you can use the style object to support all your CSS needs.
<html>
<body> …RBG Color Codes
Often you need to reference an HTML/CSS Color Code in RGB or Hex. This is known as rgb color codes.
Below is an easy-to-use table to find the …
Read Article →How to disable text selection highlighting in CSS
If you would like to disable the text selection highlighting that is enabled by default on all browsers, then you can do this:
user-select: none;
If …
Read Article →Remove dotted outline around anchors
This has become quite a common question asked by many website owners.
“How do I remove that dotted outline around an anchor?”
Lucky for …
Read Article →CSS Background Default
If you need to override an already attached class containing a background — for example, removing a background image or colour that’s being …
Read Article →CSS background image data: base64?
What the heck is all that Gobbledygook in the CSS?
So you have noticed that bit of css that says something like this in the CSS source-code and you …
Read Article →Google Background Image
Google now allows you to add a background image to the google homepage to apparently make it more, like, home.. hmmmm
Just by clicking the button at …
Read Article →Double border in CSS
CSS allows you to add a border to almost all html elements. This is one of many CSS techniques you can use to enhance your web pages, along with using …
Read Article →Simple HEX Colour Values
Here’s a quick reference for the most basic HEX colour values. These are the building blocks — once you understand how red, green, and blue …
Read Article →Wordwrap that PRE!
Ever used a <PRE> in a limited width div container? You will notice that the line gets cut off almost as if word-wrap was not enabled.
To …
Read Article →Guillotine-Bug? Bug
Yes, it’s called a Guillotine-Bug and it’s yet another bug IE users get to look forward too 😛
So how does it work?
Basically, the …
Need more than hover?
I had a hover effect on an html input element but also needed to have an active state.
The css was like this for the inputs in mention: …