Creating two side by side divs with the left a fixed width

HTML

<div id="wrapper">
    <div id="inner_left"></div>
    <div id="inner_right"></div>
</div>

CSS

*{
  margin:0;
  padding:0;  
}

#wrapper{
    margin-top:10px;

    position :relative;
    width: 100%;
    margin: 0px auto;
    height:250px;
}
#inner_left {
  position : absolute;
  top:0;
  left:0;
  bottom:0;
  background: orange;
  width: 250px;


}
#inner_right{
  position :absolute;
  top:0;
  right:0;
  bottom:0;
  left:250px;  
  background:blue; 
}

Creating two side by side responsive divs

HTML

<div class="wrapper">
    <div class="inner_left"></div>
    <div class="inner_right"></div>
</div>

CSS

body {
background-color: #444;
margin: 0;
}
#wrapper {
width: 1005px;
margin: 0 auto;
position: relative;
}
#leftcolumn, #rightcolumn {
border: 1px solid white;
min-height: 750px;
color: white;
}
#leftcolumn {
width: 250px;
background-color: #111;
min-height: 100px;
position: fixed;
}
#rightcolumn {
width: 750px;
background-color: #777;
float: right;
}

jquery-1.10.2.min.map is triggering a 404 (Not Found)

If Chrome DevTools is reporting a 404 for a .map file (maybe jquery-1.10.2.min.map, jquery.min.map or jquery-2.0.3.min.map, but can happen with anything) first thing to know is this is only requested when using the DevTools. Your users will not be hitting this 404. Now you can fix this or disable the sourcemap functionality.

Fix

Next, it's an easy fix. Head to http://jquery.com/download/ and click the Download the map file link for your version, and you'll want the uncompressed file downloaded as well.

Disable

Instead of getting the files, you can alternatively disable JavaScript source maps completely for now, in your settings. This is a fine choice if you never plan on debugging JavaScript on this page. Use the cog icon in the bottom right of the DevTools, to open settings, then select 'Enable JS Source Maps'.

Enable IE 9 Compatibility Mode on your site

As with any new version of Internet Explorer the latest release, IE10 has caused a number of issues. Fixing these issues can take time and if it's a bug in IE you are relying on Microsoft to come up with the goods.

To keep your clients you need a working site as quickly as possible. One of the solutions I use is to force IE10 to display sites using IE9 Compatibility mode. This can be done forced on a page by page bases or the entire site (assuming your site is hosted using IIS).

Page-by-page

Add the following between the head tags of your page.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >

Entire Site

Add the following to the web.config file.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE9" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Internet Explorer 9, Rounded Corners and Gradient Fills

There are various ways to create rounded corners when developing web pages. However while IE 9 supports rounded borders as soon as you add a gradient fill the disapear. To fix the problem simply place your gradiented content within an outer element with the same rounded corners and it's overflow set to hidden to mask off the corners.

HTML

<div class="mask roundedCorners">
        <div class="roundedCorners gradient">
            Content
        </div>
 </div>

CSS

.mask
{
        overflow: hidden;
}
        
.roundedCorners
{
        border-radius: 5px;
}

.gradient
{
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

Hide the web browser scroll bar

Modern web browsers are quite good at hiding scroll bars until required. However you may want to prevent scrolls regardless of screen size, or fix problems with older browsers such as IE 7.

To ensure scroll bars are hidden until required (useful for IE 6 and 7) add the following CSS.

html
{
overflow:auto;
}

To always hide scroll bars (beware of accessibility problems)

html
{
overflow:hidden;
}