Skip navigation
Currently Being Moderated

Lining up divs inside a main div: Mine not working

Aug 17, 2009 5:06 AM

Hello, I need help with my CSS design, I am trying to line many dives inside a container DIV, interestingly only the first div is well

positioned, the rest lie outside the container all together. I can't figure out what I am doing wrong. Find attached my CSS definitions and also the related code:

 

CSS:

 

/* id the for main container of index page elements */
#indexmain{
background-color:#FFFFFF;
font-weight: bold;
color:#00FF00;
width: 100%;
height: 600px;
border-width: 1px;
border-style: solid;
border-color: red;
}

/* id for welcome label */
#welcome {
background-color:#FFFFFF;
color:#00FF00;
padding-top: 5px;
padding-right: 5px; 
padding-left:5px;
padding-bottom:5px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 140px;
height: 20px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 160px;
left: 120px;
}

/* id for main container of index elements */
#welcomemain{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 60%;
height: 400px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 192px;
left: 120px;
}

/* id for description of consumer component */
#consumerdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
top: 0;
left:0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}

/* id for label of consumer link */
#consumerlink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
background-color:#CCFF66;
top: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}

/* id for label of business link */
#businesslink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
background-color:#CCFF66;
bottom: 0;
left: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}

/* id for description of business component */
#businessdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
bottom: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
}

/* id to control positioning of content*/
.centerlinkcontent{
     position:absolute;
     top:80px;
     left: 110px;
}

.centerdescriptioncontent {
position:absolute;
top:50px;
left:20px;
}

.titlelabelconsumer{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
}

.titlelabelbusiness{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
top:400px;
}


.searchresultscontainer{
width:812px;;
height:62px;
border-style:solid;
border-color:#FF0000;}



.searchresultsimg{
width:100px;
height:60px;
background-color:#CCCCCC;
left:0px;
border-style:solid;
border-color:#9966CC;
border-width:1px;
}

/*.searchresultsdetail{
position:relative;
width:700px;
height:61px;
text-align:center;
background-color:#CCCCCC;
float:right;
left:101px;
margin:0;
padding:0;
}*/

.productdescription{
     position:absolute;
     width:300px;
     height:36px;
     text-align:left;
     left:101px;
     margin:0;
     padding-bottom:10px;
    padding-top:12px;
     border-style:solid;
     border-color:#FFCC00;
     border-width:1px;
}

.productmodelno{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:401px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#996600;
border-width:1px;
}

.productmodelyear{
     position:absolute;
     width:100px;
     height:36px;
     text-align:left;
     left:501px;
     margin:0;
     padding-bottom:10px;
    padding-top:12px;
     border-style:solid;
     border-color:#00FF00;
     border-width:1px;
     }

.productprice{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:601px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#000033;
border-width:1px;
}

.productuserid{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:701px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#990000;
border-width:1px;
}

 

 

 

 

 

Related Code:

<!---Create a container for the search results --->      
<div class="searchresultscontainer">
    <div class="searchresultsimg"><!--- creating a resized version of uploaded image of product --->
           <cfimage source="#ExpandPath('images/consumer/#Cnsmr_ProductIMAGE#')#" action="resize" width="100" height="60" name="resizedImg" format= "jpg">
           <cfimage source="#resizedImg#" action="writeToBrowser"><!---img src="images/consumer/#Cnsmr_ProductIMAGE#"--->
    </div>
      
    <div class="productdescription"><font size="+2">#Cnsmr_ProductDESCRIPTION# </font>  <font size="+2"></div>
     
     <div class="productmodelno"><a href="showProductDetail.cfm?Cnsmr_ProductCountID=#URLEncodedFormat(TRIM(Cnsmr_ProductCountID))#">#Cnsmr_ProductMODELNo# </font> </a></div> 
     
     <div class="productmodelyear"><font size="+2">#Cnsmr_ProductMODELYEAR# </font> </div>  
     
     <div class="productprice"><font size="+2">#Cnsmr_ProductPRICE#</font> </div> 
     
     <div class="productuserid"><font color="#000066#" size="+2">#User_id#</font></div>
     
</div> 
<!--- end of searchresultscontainer --->
</cfoutput>

 

Attachments:
 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points