PDA

Click to See Complete Forum and Search --> : [RESOLVED] Issue with Div tag

manojkmi
01-27-2010, 09:21 AM
I have div blocks has to come side by side. It is working fine in IE6 but the second block is coming down in Chrome. Here is the code -

<div id="homecontent">
<div id="mainbox">
<h1>News &amp; Announcements</h1>
<div id="newsbox" style="overflow:auto;height:401px;">
<logic:iterate id="menuNewsDto"
name="homePageForm"
property="homePageDto.menuNewsList"
indexId="counter">
<bean:write name="menuNewsDto"
property="news"
filter="false" />
</logic:iterate>
</div>
</div> <!-- end of div main box -->
<div id="rightbox">
<div>
<h1>Support Center</h1>
<table style="border-color:#eeeeee;" width="100%" >
<tr>
<td class="altHomePageSmall" width="10%">
Documentation :
<a class="altHomePageSmall" style="color:#333399;"
onclick="openExternalLink('<%=documentationLink%>')"
href="javascript:void(0)"
title="Refer to the EHPAS documentation available at our TeamConnect site.">
<strong>EHPAS Support Documents &nbsp;</strong></a>
</td>
</tr>
<tr>
<td class="stdHomePageSmall" width="5%">
Contact Us :
<a class="stdHomePageSmall" style="color:#333399;"
href="javascript:void(0)"
onclick="openExternalLink('<%=etrackerLink%>')">
<strong> Open ticket to EHPAS Team</strong></a>
</td>
</tr>
</table>
</div>

Css:-

#homecontent {
position: relative;
float: none;
clear: both;
margin: 20px auto 20px auto;
width: auto;
}
#homecontent h1 {
font-size: 130%;
}
#mainbox {
/*position: relative;
margin: 20px 250px 20px 20px;
background-color: #F0F0F0;
left: -1px;*/
display: block;
width: 65%;
float: left;
background-color: #F0F0F0;
margin: 0 1%;
}
#mainbox h1 {
background-image: url(/ehpasWeb/images/New_news.jpg);
margin: 0;
padding: 5px 10px;
color: #000;
}
#rightbox {
/*position: absolute;
top: 0px;
right: 20px;
width: 210px;
height: 1%;
overflow: visible;
background-color: #F0F0F0;*/
width: 30%;
}
#rightbox div {
background-color: #F0F0F0;
margin-bottom: 12px;
}
#rightbox h1 {
background-color: #999999;
margin: 0;
padding: 4px 6px;
color: #FFFFFF;

}


Please help me out.
Fang
01-27-2010, 01:46 PM
#rightbox {float:left;}
manojkmi
01-27-2010, 02:53 PM
Thanks Fang for the reply, but it did not work. Instead of getting blocks side by side still second block is displaying down.
Fang
01-27-2010, 03:05 PM
Must have a valid DTD<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
#homecontent {
clear: both;
margin: 20px auto 20px auto;
width: auto;
}
#homecontent h1 {
font-size: 130%;
}
#mainbox {
/*position: relative;
margin: 20px 250px 20px 20px;
background-color: #F0F0F0;
left: -1px;*/
display: block;
width: 65%;
float: left;
background-color: #F0F0F0;
margin: 0 1%;
}
#mainbox h1 {
background-image: url(/ehpasWeb/images/New_news.jpg);
margin: 0;
padding: 5px 10px;
color: #000;
}
#rightbox {
/*position: absolute;
top: 0px;
right: 20px;
width: 210px;
height: 1%;
overflow: visible;
background-color: #F0F0F0;*/
width: 30%;float: left;
}
#rightbox div {
background-color: #F0F0F0;
margin-bottom: 12px;
}
#rightbox h1 {
background-color: #999999;
margin: 0;
padding: 4px 6px;
color: #FFFFFF;

}</style>

</head>
<body>
<div id="homecontent">
<div id="mainbox">
<h1>News &amp; Announcements</h1>
<div id="newsbox" style="overflow:auto;height:401px;">
<logic:iterate id="menuNewsDto"
name="homePageForm"
property="homePageDto.menuNewsList"
indexId="counter">
<bean:write name="menuNewsDto"
property="news"
filter="false" />
</logic:iterate>
</div>
</div> <!-- end of div main box -->
<div id="rightbox">
<div>
<h1>Support Center</h1>
<table style="border-color:#eeeeee;" width="100%" >
<tr>
<td class="altHomePageSmall" width="10%">
Documentation :
<a class="altHomePageSmall" style="color:#333399;"
onclick="openExternalLink('<%=documentationLink%>')"
href="javascript:void(0)"
title="Refer to the EHPAS documentation available at our TeamConnect site.">
<strong>EHPAS Support Documents &nbsp;</strong></a>
</td>
</tr>
<tr>
<td class="stdHomePageSmall" width="5%">
Contact Us :
<a class="stdHomePageSmall" style="color:#333399;"
href="javascript:void(0)"
onclick="openExternalLink('<%=etrackerLink%>')">
<strong> Open ticket to EHPAS Team</strong></a>
</td>
</tr>
</table>
</div>
</body>
</html>
manojkmi
01-27-2010, 03:21 PM
Thank you very much Fang, It works now.