Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 181
  • Last Modified:

problem in css

hi
           i have a problem in css.

in the following code apart from header and footer

i need 4 divisions in the mid part

menu (already done - left)
dynamically loaded content(already done-middle)
right side 2 division tags each  of the height half of the dynamically loaded content.(WHICH IS WHERE MY PROBLEM IS)



Html part:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>


<link href="../ss.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript" src="user.js">

</script>



</head>

<body >
<div id="bod">

<div id="header2">
<div class="logo">
  <img src="../images/logo.jpg" width="209" height="242" alt="logo" id="img1"/></div>
  <div class="topmid">
  <h1 align="center">Blazing Cops</h1>
  <h4 align="center">Helping People Every Millisecond...</h4>
 
  </div>
<div id="topright">
</div>
</div>



<div class="Menu">
  <div class="importantlinks">
    <h3 align="center">Navigation</h3>
  </div>
  <ul class="subnav">
    <li> <a href="#">Home</a><br/>
      <br/>
      <a href="#">RTI act</a><br/>
      <br/>
      <a href="#">Recruitment</a><br/>
      <br/>
      <a href="#">Complaint Registration</a><br/>
      <br/>
      <a href="#">Feedback</a> <br/>
      <br/>
      <a href="#">Suggestions</a><br/>
      <br/>
      <a href="#">News And Events</a><br/>
      <br/>
      <a href="#">About us</a><br/>
      <br/>
      <a href="#">Contact us</a><br/>
    </li>
  </ul>
</div>
<div class="content-to-replace"></div>
<div id="midright"></div>
<div id="footer">
  <p align="center">Site designed by <a href="http://www.ajitah.com">Blazing Cops Team</a> <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">&nbsp;&nbsp;&nbsp;XHTML</abbr>  </a>| <a  href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a>  </p>

</div>
</div>


</body>
</html>









CSS part:

@charset "utf-8";
/* CSS Document */

#bod
{
      
      border:dashed;
      width:100%;
      clear:both;
}


#img1
{
      height:165px;
      width:160px;
}

.topmid
{
      position:relative;
      float:none;
      height:153px;
      width:670px;
      padding-top:10px;




}


 .logo
{
      

      background-repeat:repeat-x;
      float:left;
      width:160px;
      height:158px;
      background-position:center;
      
}

.message
{
      padding-left:10px;
      width:510px;
      height:120px;
      font-size:14px;

      
}


.Menu
{
      position:relative;
      float:left;
      width:17%;
      height:58%;
      border-color:#F00;
      background-color:#FFF;
      border:groove;
      top:2%;
      overflow:auto;

      
}

.subnav {
      margin: 0px;
      padding: 10px 10px;
      padding-top:30px;
      list-style-type: none;
      
      
}
.subnav li {
      display: block;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-bottom-color: #D8D3B9;
      padding-left:10px;
}

#footer {
      
      width:100%;
      background-repeat: repeat-x;
      background-color: #ffffff;

      padding-right: 25px;
      
      border:groove;
      background-color:#FFF;
      clear:both;
      min-height:50px;


      

}
      
      

#topright
{
      position:absolute;
      background-image: url(images/topright.jpg);
      background-position:center;
      width:267px;
      right:4px;
      clear:both;
      height:163px;
      top:4px;

}

#header2{
      position:relative;
      
      background-image:repeat-x;
      height:25%;
      background-color:#DDDD44;

width:100%;
      border:groove;
      clear:both;
}      


.importantlinks
{
      background-color:#F00;
      color:#FFF;
      width:auto;
}

#img2
{
      position:relative;
      top:10px;
      left:250px;
      width:180px;
}


#img3
{
      position:absolute;
      top:70px;
      left:20px;
}


.content-to-replace
{

       min-height:110%;
      width:58%;
        margin-left: 22.1%;
        /*change this also*/
        border: 1px solid #000000;
      
      position: relative;
      display:inline-table;
      
      

}

#midright{
      width: 23%;
      margin-left: 80.2%;
      height:39%;      
      border: 1px solid #000000;
      position:relative;


      clear:both;
      
}










Pls help
thanks in advance!
0
manikandan689
Asked:
manikandan689
1 Solution
 
dwkdCommented:
4 with the menu or 4 extra?
i recommend you put the menu inside a container and add 3 more mid contet divs .. and float all 4 left or display as inline:block or display as table-cells or however you wanna do it
if u float left remember to clear:left  :)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now