Need help with coding a parent tag, and design issues

Report · Dec 18, 2017

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:

<h3 class="govTitle">Government Codes</h3>

Cage Code: 3C6R7

Black American Owned

<br/>

Minority Owned

<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>

<h3 class="performanceTitle">Past Performance</h3>

<b style="color:#D3D3D3;">Kanawha Stone Company, Inc</b>

<br/>

Placement of Steel Rebar on Bridge

</b>

<b style="color:#D3D3D3;">Blythe Development Co.</b>

<br/>

Building Renovation

</b>

<b style="color:#D3D3D3;">Haymes Brothers</b>

<br/>

Placement of Steel Rebar & Concrete on Bridge

</b>

<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 {

}

Report · Dec 18, 2017

Not quite sure what youre looking for, maybe something like below?

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Helvetica Neue;

}

* {

box-sizing: border-box;

}

.refferences {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

background-color: #3F88B9;

padding: 70px 40px 40px 40px;

width: 95%;

margin: 0 auto;

max-width: 1400px;

}

.asideLeft {

position: relative;

width: 35%;

border: 1px solid #fff;

padding: 20px;

}

@media screen and (max-width: 1200px) {

.asideLeft {

width: 48%;

}

@media screen and (max-width: 700px) {

.asideLeft {

width: 100%;

}

.asideLeft h3 {

position: absolute;

top: -40px;

left: 0;

margin: 0;

padding: 0 0 20px 0;

}

.govCodes {

font-size: 14px;

line-height: 20px;

}

.asideRight {

position: relative;

width: 60%;

border: 1px solid #fff;

padding: 20px;

}

@media screen and (max-width: 1200px) {

.asideRight {

width: 48%;

}

@media screen and (max-width: 700px) {

.asideRight {

width: 100%;

margin-top: 90px;

}

.asideRight h3 {

position: absolute;

top: -40px;

left: 0;

margin: 0;

padding: 0 0 20px 0;

z-index: 100;

}

.pastCompanies {

font-size: 14px;

line-height: 20px;

margin: 0;

}

dt {

float: left;

width: 35%;

font-weight: 500;

color: #fff;

}

@media screen and (max-width: 1200px) {

dt {

float: none;

width: 100%;

}

dd {

float: left;

width: 50%;

margin: 0 0 5px 0;

}

@media screen and (max-width: 1200px) {

dd {

float: none;

width: 100%;

}

</style>

</head>

<body>

<h3>Government Codes</h3>

Cage Code: 3C6R7

Black American Owned

<br/>

Minority Owned

<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/>

</div>

</aside>

<h3>Past Performance</h3>

<dt>Kanawha Stone Company, Inc</dt>

<dd>Placement of Steel Rebar on Bridge</dd>

<dt>Blythe Development Co.</dt>

<dd>Building Renovation</dd>

<dt>Haymes Brothers</dt>

<dd>Placement of Steel Rebar & Concrete on Bridge</dd>

<dt>Ken Construction Co. Inc.</dt>

<dd>Sidewalk Replacement</dd>

</dl>

</aside>

</section>

</body>

</html>

Report · Dec 18, 2017

I have no idea what the design is supposed to look like so I can't make suggestions until that's clarified.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 18, 2017

My apologies, I left out the picture of that sections design in the initial posting. Here it is

Report · Dec 18, 2017

Ok that's what you envision for desktops. But what about mobile and tablets?

Do you want to break to a single column with Performance beneath Gov't?

Are you using Bootstrap layouts and if so, which version?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 18, 2017

ikevin12 wrote
My apologies, I left out the picture of that sections design in the initial posting. Here it is

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Helvetica Neue;

}

* {

box-sizing: border-box;

}

.refferences {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

background-color: #3F88B9;

padding: 70px 40px 40px 40px;

width: 95%;

margin: 0 auto;

max-width: 1400px;

}

.asideLeft {

position: relative;

width: 30%;

border: 1px solid #fff;

padding: 25px;

}

@media screen and (max-width: 1200px) {

.asideLeft {

width: 48%;

}

@media screen and (max-width: 700px) {

.asideLeft {

width: 100%;

}

.asideLeft h3 {

position: absolute;

top: -40px;

left: 0;

margin: 0;

padding: 0 0 20px 0;

}

.govCodes {

font-size: 14px;

line-height: 20px;

}

.asideRight {

position: relative;

width: 65%;

border: 1px solid #fff;

padding: 25px;

}

@media screen and (max-width: 1200px) {

.asideRight {

width: 48%;

}

@media screen and (max-width: 700px) {

.asideRight {

width: 100%;

margin-top: 90px;

}

.asideRight h3 {

position: absolute;

top: -40px;

left: 0;

margin: 0;

padding: 0 0 20px 0;

z-index: 100;

}

.pastCompanies {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

font-size: 16px;

line-height: 22px;

margin: 0;

}

.companyDetails {

width: 48%;

margin: 20px 0;

}

@media screen and (max-width: 1200px) {

.companyDetails {

width: 100%;

}

.companyDetails h4 {

margin: 0;

padding: 0;

}

.companyDetails p {

margin: 0;

padding: 0;

}

.companyEmail {

color: #fff;

}

.companyTel {

color: #fff;

font-size: 14px;

color: #000;

}

</style>

</head>

<body>

<h3>Government Codes</h3>

Cage Code: 3C6R7<br>

Black American Owned<br/>

Minority Owned<br/>

<br/>

NAICIS Codes<br>

*541513 Computer Systems<br>

Facilities Supports<br>

*541611 Admin. Mgt, Gen. Mgt Consulting<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/>

</div>

</aside>

<h3>Past Performance</h3>

<h4>Howard Winters</h4>

<p>

Kanawha Stone Company Inc<br>

Placement of Steel Rebar on Bridge<br>

<span class="companyEmail">howard.Winters@kanawhastone.com</span><br>

</p>

</div>

<h4>Tim Worley</h4>

<p>

Haymes Brothers<br>

Placement of Steel Rebar & Concrete on Bridge<br>

<span class="companyEmail">worley@haymesbrothers.com</span><br>

</p>

</div>

<h4>Bart A. Devore</h4>

<p>

Blythe Development Co.<br>

Building Renovation<br>

<span class="companyEmail">bdevore@blythedevelopment.com</span><br>

</p>

</div>

<h4>Ken Morrison</h4>

<p>

Ken Construction Co. Inc.<br>

Sideawalk Replacement<br>

<span class="companyEmail">kenconst@live.com</span><br>

</p>

</div>

</div>

</aside>

</section>

</body>

</html>

Need help with coding a parent tag, and design issues

1 Correct answer