i'm using ie6 and this is my site's code
<div id="content-area">
<div class="panel-display panel-1col clear-block" id="welcome">
<div class="panel-panel panel-col">
<div><div class="panel-pane pane-custom pane-1" >
<div class="pane-content">
<div class="welcome_message"><br />
<h3><img src="sites/all/themes/yghhzen/css/images/helpingpeoplehelpthemselves.png" alt="Helping people help themselves."/></h3><br />
<ul><div class="spacer"></div>
<li><a href="/dailynews/all"><strong>Learn</strong> more</a>. <a href="/supports/"><strong>Get</strong> support</a>.</li>
<li><a href="/support_group/add"><strong>Create</strong> a group</a>. <a href="/friendsblock/"><strong>Find</strong> friends</a>.</li>
<li class="last"><a href="/blogs/date/all"><strong>Share</strong> ideas</a>. <a href="/start"><strong>Make</strong> a difference</a>.<strong style="font-size:21px;">©</strong></li>
</ul><br />
</div><br /><div class="grid"><div class="grid-m1"></div><a href="/start"><div class="grid-c1">
<div id="front_page_button1">
<br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/getting_started.png" /><br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/register_here.png" /><br />
</div>
</div>
</a>
<div class="grid-m2"></div>
<a href="/dailynews/all"">
<div class="grid-c2">
<div id="front_page_button1">
<br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/read_news.png" /><br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/find_events.png" /><br />
</div>
</div>
</a>
<div class="grid-m3"></div>
<a href="/blogs/date/all"">
<div class="grid-c3">
<div id="front_page_button1">
<br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_stories.png" /><br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/start_blog.png" /><br />
</div>
</div>
</a>
<div class="grid-m4"></div>
<a href=/user/register>
<div class="grid-c4">
<div id="front_page_button1">
<br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_join.png" /><br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/find_support.png" /><br />
</div>
</div>
</a>
<div class="grid-m5"></div>
<a href=/user/register>
<div class="grid-c5">
<div id="front_page_button1">
<br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/heading_start.png" /><br />
<img style="display:block; margin:auto;" src="/sites/all/themes/yghhzen/css/images/help_others.png" /><br />
</div>
</div>
</a>
</div> </div>
</div>
</div>
</div>
</div>
</div>
and the related CSS code
.grid {
width: 92%;
margin: -15px auto;
}
.grid-m1 {
float: left;
height: 1px;
}
.grid-c1 {
float: left;
width: 20%;
/*border-bottom-style: dotted;
border-bottom-color: #666;
border-bottom-width: 1px;*/
/*padding: 10px;*/
}
.grid-m2 {
float: left;
height: 1px;
}
.grid-c2 {
float: left;
width: 20%;
/*border-bottom-style: dotted;
border-bottom-color: #666;
border-bottom-width: 1px;*/
/*padding: 10px;*/
}
.grid-m3 {
float: left;
/*width: 2%;*/
height: 1px;
}
.grid-c3 {
float: left;
width: 20%;
/*padding: 10px;*/
}
.grid-m4 {
float: left;
/*width: 2%;*/
height: 1px;
}
.grid-c4 {
float: left;
width: 20%;
/*padding: 10px;*/
}
.grid-m5 {
float: left;
/*width: 2%;*/
height: 1px;
}
.grid-c5 {
float: left;
width: 20%;
/*padding: 10px;*/
}
when i resize the screen to a smaller width the last div - grid-c5 falls down. and everything else (grid-c1 - grid-c4) stay together in a straight alignment. i want the last div to not fall down and stay in a straight alignment like the rest of the divs
