Need help with coding a parent tag, and design issues
In the code I have a section with a class called “refferences”. In this section it holds government codes that contractors use, and past performances for the company I am building the site for. I am wanting both ‘Government Codes’, and ‘Past Performance’ to be side by side like they are in the initial design of the website.
However, depending on the size of the browser you are viewing this on, the both <aside> elements are directly on point, spread out far from each other, or overlapping each other by the ‘Past Performance” below the ‘Government Codes’ out of the blue background of the section.
Another issue regarding the Past Performance class, I coded the whole section in an <aside> elements with the class of “asideRight”, I then put the <h3> element its own style to match up with the past performance like it is in the initial design.
Each past performance company follows in the initial <p> element with the class of “pastCompanies”. I then grouped each company by itself with a <b> element with their own id’s. I did this so I can group each company just like it is in the initial design of the website. Two columns, and two rows perfectly spaced.
However, the companies are not matching up like the design is, even after I go into the css to put a float element or clear element.
For this post, I have removed any css from the companies.
HTML Code:
<section class="refferences">
<aside class="asideLeft">
<h3 class="govTitle">Government Codes</h3>
<!------------------------------------------------------->
<p class="govCodes">
Cage Code: 3C6R7
Black American Owned
<br/>
Minority Owned
<br/>
<br/>
<br/>
*531312 Commercial Prop. Mgt.<br/>
*561210 Gov. Base. Facilities Op. Support Services<br/>
*237310 Highway, Street, and Bridge Construction<br/>
*238910 Site Prep, Road Const. Pavement Design Installation<br/>
*238990 All other specialty trade contractors<br/>
*484220 Specialized Freight (except used goods), Local<br/>
</p>
</aside>
<aside class="asideRight">
<h3 class="performanceTitle">Past Performance</h3>
<!------------------------------------------------------->
<p class="pastCompanies">
<b id="kanawha">
<b style="color:#D3D3D3;">Kanawha Stone Company, Inc</b>
<br/>
Placement of Steel Rebar on Bridge
</b>
<b id="blythe">
<b style="color:#D3D3D3;">Blythe Development Co.</b>
<br/>
Building Renovation
</b>
<b id="haymes">
<b style="color:#D3D3D3;">Haymes Brothers</b>
<br/>
Placement of Steel Rebar & Concrete on Bridge
</b>
<b id="ken">
<b style="color:#D3D3D3;">Ken Construction Co. Inc.</b>
<br/>
Sidewalk Replacement
</b>
</p>
</aside>
</section>
CSS Code:
.refferences {
background-color: #3F88B9;
height: 500px;
display: block;
border-top: thin solid #95989A;
border-bottom: thin solid #95989A;
}
.asideLeft {
margin-top: 30px;
margin-left: 35px;
width: 400px;
float: left; /*this code made the asideLeft be on the left side of the refferences**/
}
.govTitle {
margin-left: 15px;
}
.govCodes {
border: thin solid #FFFFFF;
height: 300px;
font-family: Helvetica Neue;
font-size: small;
padding-top: 60px;
padding-left: 15px;
}
.asideRight {
float: right;
width: 850px;
margin-top: 30px;
}
.performanceTitle {
margin-left: 15px;
}
.pastCompanies {
height: 300px;
font-family: Arial Hebrew Scholar;
border: thin solid #FFFFFF;
padding-top: 60px;
padding-left: 15px;
margin-right: 35px;
}
#kanawha {
}
#blythe {
}
#haymes {
}
#ken {
}
AdChoices