Tried but can't get it to work.
It seems to work in chrome but not in internet explorer or firefox.
Here is my code.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="/css/screen-styles.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/css/respond.min.js"></script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alex-brush:n4:default;source-sans-pro:n2,i2,n4,i4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<!-- Begin Header Code -->
<!-- End Header Code -->
<!-- Begin Main Content Code -->
<div class="fluid maincontentwrap">
<!-- Begin Section Content Code -->
<div class="fluid sectionwrap"><section class="fluid intro">
<div class="fluid table">
<table width="100%">
<tr>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
<td width="25%"><img src="http://www.elvisyorkshireterrier.com/images/why-dogs-stay-small.jpg" alt=""/></td>
</tr>
</table></div></section>
</div>
<!-- End Section Content Code -->
<!-- Begin Aside Content Code -->
<div class="fluid asidewrap"><aside class="fluid sidecontent">This is the content for Layout Section Tag "aside"
</aside>
</div>
<!-- End Aside Content Code -->
</div>
<!-- End Main Content Code -->
<!-- Begin footer Code -->
<!-- End Footer Code -->
</div>
</body>
</html>
Here is my css file.
@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 24;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.3913%;
padding-left: 1.304%;
padding-right: 1.3043%;
clear: none;
float: none;
}
#header {
background-color: #004080;
}
#headertext {
font-family: alex-brush;
font-style: normal;
font-weight: 400;
color: #ffffff;
font-size: large;
}
#mainnav {
}
#mainnavlist {
margin-top: 4px;
margin-bottom: 4px;
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
margin-left: 0;
}
.mainnavitem {
text-align: center;
width: 100%;
clear: both;
margin-left: 0px;
background-color: #252122;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 4px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}
.mainnavitem a {
color: #FFFFFF;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 400;
}
.mainnavitem a:hover {
color: #cc0000;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 400;
}
#footer {
background-color: #004080;
color: #ffffff;
text-align: center;
}
.footernav {
width: 100%;
clear: both;
margin-left: 0;
}
.footermenulist {
width: 100%;
margin-left: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.footermenuitem {
width: 100%;
clear: both;
margin-left: 0;
}
.fluid.footermenuitem a {
color: #FFFFFF;
}
.fluid.footermenuitem a:hover {
color: #cc0000;
}
#footernav2 {
}
#footernavlist2 {
}
.footernav2 {
}
.footernavlist2 {
width: 100%;
margin-left: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.footernavitem2 {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav2 .fluid.fluidList.footernavlist2 .fluid.footernavitem2 a {
color: #FFFFFF;
}
.footernav2 .fluid.fluidList.footernavlist2 .fluid.footernavitem2 a:hover {
color: #cc0000;
}
#footerdiv {
}
#footer #footerdiv a {
color: #FFFFFF;
}
#footer #footerdiv a:hover {
color: #cc0000;
}
#container {
margin-left: auto;
margin-right: auto;
}
.fl {
float: left;
margin-left: 5px;
margin-right: 5px;
}
.fr {
float: right;
margin-left: 5px;
margin-right: 5px;
}
#container .fr a {
color: #FFFFFF;
text-decoration: none;
font-family: source-sans-pro;
font-style: italic;
font-weight: 200;
}
#container .fr a:hover {
color: #D52349;
font-family: source-sans-pro;
font-style: italic;
font-weight: 200;
text-decoration: none;
}
.maincontentwrap {
background-color: #FFFFFF;
}
.maincontentsection {
width: 100%;
padding-left: 0%;
padding-right: 0%;
}
.rtsidebar {
width: 100%;
clear: both;
margin-left: 0;
}
.borderdiv {
border: 1px solid #CCCCCC;
border-radius: 5px;
padding-left: 2.0%;
padding-right: 2.0%;
padding-top: 2.0%;
padding-bottom: 2.0%;
width: 96%;
background-color: #FFFFFF;
text-align: center;
}
.borderdivfill {
border: 1px solid #CCCCCC;
border-radius: 5px;
background-color: #9FCFFF;
padding-left: 2.0%;
padding-right: 2.0%;
padding-top: 2.0%;
padding-bottom: 2.0%;
width: 96%;
}
.sidebarh3heading {
text-align: center;
}
.sidebarh4heading {
text-align: center;
}
.fluid.borderdiv a {
text-align: center;
}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: medium;
}
.sectionwrap {
width: 100%;
}
.asidewrap {
width: 100%;
clear: both;
margin-left: 0;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
border: 1px solid #252122;
border-radius: 5px;
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 100%;
}
.puppyforsaleinfo {
width: 100%;
clear: both;
margin-left: 0;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
text-align: center;
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.avail {
color: #CC0D10;
font-size: x-large;
}
.spacer {
}
.prodinfo {
color: #160CEB;
font-size: large;
}
.puppyname {
}
.button {
margin-top: 0.2%;
margin-bottom: 0.2px;
}
.fluid.button a img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0%;
margin-bottom: 0%;
}
.fluid.puppyforsaleimage img {
display: block;
margin-left: auto;
margin-right: auto;
}
.test {
width: 100%;
}
.test3 {
}
.table {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 98.3695%;
padding-left: 0.8152%;
padding-right: 0.8152%;
clear: none;
float: none;
margin-left: auto;
}
#header {
}
#headernav {
}
#headernavlist {
}
.headernavitem {
width: 23.7569%;
clear: none;
margin-left: 1.6574%;
}
#headertext {
color: #ffffff;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
#mainnav {
}
#mainnavlist {
width: 100%;
margin-left: 0;
}
.mainnavitem {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav {
width: 100%;
margin-left: 1.6574%;
clear: none;
}
.footermenulist {
width: 100%;
margin-left: 0;
}
.footermenuitem {
width: 100%;
clear: both;
margin-left: 0;
}
.footernav2 {
}
.footernavlist2 {
width: 100%;
margin-left: 0;
}
.footernavitem2 {
width: 100%;
clear: both;
margin-left: 0;
}
#footerdiv {
}
#container {
}
.maincontentwrap {
}
.maincontentsection {
width: 100%;
}
.rtsidebar {
width: 100%;
clear: both;
margin-left: 0;
}
.borderdiv {
}
.borderdivfill {
}
.sidebarh3heading {
}
.sidebarh4heading {
}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: large;
}
.sectionwrap {
width: 100%;
}
.asidewrap {
width: 100%;
clear: both;
margin-left: 0;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 100%;
}
.puppyforsaleinfo {
width: 100%;
clear: both;
margin-left: 0;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.spacer {
}
.puppyname {
}
.button {
}
.test {
width: 100%;
}
.test3 {
}
.table {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 89.5108%;
max-width: 1232px;
padding-left: 0.2445%;
padding-right: 0.2445%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#headernav {
}
#headernavlist {
}
.headernavitem {
width: 12.0218%;
clear: none;
margin-left: 0.5464%;
margin-right: 0px;
}
#headertext {
color: #ffffff;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
#mainnav {
}
#mainnavlist {
margin-right: 0px;
margin-left: 4.1894%;
margin-top: 4px;
margin-bottom: 4px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
width: 91.6211%;
}
.mainnavitem {
width: 13.1212%;
margin-left: 0.5964%;
clear: none;
}
#footer {
}
.footernav {
width: 100%;
clear: both;
margin-left: 0;
}
.footermenulist {
width: 70.6739%;
margin-left: 16.7577%;
}
.footermenuitem {
width: 22.9381%;
margin-left: 0.7731%;
clear: none;
}
.footernav2 {
}
.footernavlist2 {
width: 79.0528%;
margin-left: 12.5683%;
}
.footernavitem2 {
width: 15.2073%;
margin-left: 0.6912%;
clear: none;
}
#footerdiv {
}
#container {
}
.maincontentwrap {
padding-left: 0%;
}
.maincontentsection {
width: 74.8633%;
}
.rtsidebar {
width: 24.5901%;
margin-left: 0.5464%;
clear: none;
}
.borderdiv {
}
.borderdivfill {
}
.sidebarh3heading {
}
.sidebarh4heading {
}
.headertext {
color: #FFFFFF;
font-family: alex-brush;
font-style: normal;
font-weight: 400;
font-size: x-large;
}
.sectionwrap {
width: 70.6739%;
padding-left: 1%;
}
.asidewrap {
width: 24.5901%;
margin-left: 0.5464%;
clear: none;
padding-left: 1.5%;
padding-right: 1%;
}
.intro {
}
.sidecontent {
}
.breadcrumb {
}
.puppyforsale {
}
.puppyforsalecontainer {
}
.puppyforsaleimage {
width: 40.7216%;
}
.puppyforsaleinfo {
width: 52.5773%;
margin-left: 0.7731%;
clear: none;
}
.puppyintro {
}
.linkclaw {
}
.yorkiename {
}
.puppyinfolist {
}
.puppyinfoitem {
}
.puppyavailability {
}
.spacer {
}
.puppyname {
}
.button {
}
.test {
width: 94.0721%;
}
.test3 {
}
.table {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
Any help is appreciated.
