How to organize my HTML and CSS better? - html

Question

I am in the learning of coding so I'm very new to this. But I'm pretty sure I could set up my code a much better way than i have done, could anyone tell me what I can do better? Reason for asking is to be better on it.
HTML Code:
<div class="infobox">
<h3>Pinstripe Suit Jacket</h3>
<div class="suggested">
<div class="sug-text">
<h4 class="opskinsug">OPSkins Suggested:</h4>
<h4 class="survivorsug">Survivor's Suggested:</h4>
</div>
<div class="sug-price">
<h4 class="opssug">$0.26</h4>
<h4 class="survsug">$0.27</h4>
</div>
</div>
<div class="cheap" id="pinstripe-jacket">
<p> 44</p>
</div>
<img src="images/pinstripesuitjacket.png" width="300" >
</div>
CSS Code:
.infobox {
background-color: rgba(0, 0, 0, 0.3);
position: relative;
text-align: center;
border-style: solid;
border-color: orange;
border-width: 1px;
border-radius: 25px;
width: 250px;
height: 300px;
display: inline-block;
margin-left: 20px;
}
.infobox a:link {
color: #fff;
text-decoration: none;
}
.infobox a:visited {
color: #fff;
}
.infobox a:hover {
color: black;
}
.infobox h3 {
background-color: orange;
}
.infobox img {
position: relative;
top: -232px;
left: 15px;
z-index: 0;
}
.opskinsug {
font-size: 13px;
text-align: center;
width: 100px;
position: relative;
left: -20px;
z-index: 1;
display: inline-block;
}
.survivorsug {
position: relative;
text-align: center;
left: 20px;
font-size: 13px;
width: 100px;
z-index: 1;
display: inline-block;
}
.opssug {
position: relative;
text-align: center;
width: 100px;
left: -20px;
font-size: 20px;
color: #fff;
top: -40px;
z-index: 1;
display: inline-block;
}
.survsug {
text-align: center;
position: relative;
width: 100px;
font-size: 20px;
left: 20px;
top: -40px;
color: #fff;
z-index: 1;
display: inline-block;
}
.suggested {
background-color: rgba(255, 165, 0, 0.4);
height: 70px;
position: relative;
z-index: 1;
}
.sug-text {
position: relative;
top: -5px;
}
.sug-price {
position: relative;
top: -8px;
}
.cheap {
position: relative;
z-index: 1;
font-size: 52px;
display: inline-block;
left: -70px;
color: #fff;
}
on my screen its looking like this:
preview

Answer 1

Here's an updated HTML. I've replaced the inner <div>s with a definition list <dl>, which isn't entirely meant for this use, but since you're having 1 on 1 relationship with heading and price, it can be used for this. I also removed the <p> inside the last <div>, since that is not a paragraph in any way, and you can position it inside the <div> (no need for a wrapper, really). I didn't do the CSS, but it should be fairly simple to reformat it to fit the new HTML.
<div class="infobox">
<h3>Pinstripe Suit Jacket</h3>
<div class="suggested">
<dl>
<dt>OPSkins Suggested:</dt>
<dd>$0.26</dd>
</dl>
<dl>
<dt>Survivor's Suggested:</dt>
<dd>$0.27</dd>
</dl>
</div>
<div class="cheap" id="pinstripe-jacket">
44
</div>
<img src="images/pinstripesuitjacket.png" width="300">
</div>