One element behind 2 others

Question

I added a table, calculator and a skill bar to my site, and I used float to put those elements on the same line. I floated the table to the left and the calculator to the right, and I want my skill bar below both of them. Unfortunately, the skill bar is "behind" the table and the calculator. Here's what I mean:

body {
    background-image: url( ./images/background-1.png);
    background-size: 100% 125%;
    font-family: verdana;
}

p {
    color:#333333;
    font-size:130%;
}

.table1, th, td {
    color:#030099;
    border: 1px solid black;
    border-width: 0px 1px 1px 1px;
    font-size:110%;
}

.title {
    text-decoration: underline;
    color: #030099;
    font-size: 300%;
    font-family: verdana;

}

.tc1 {
    background-color: white;
    border: 2px solid black;
    padding: 5px;
}

a {
    text-decoration: none;
}

.form1{
    border: 1px solid black ;
    padding: 10px;
    background-color: white;
    width: 350px;
    border-radius: 2.5px;
    font-family: verdana;
}

.navbar {
    width: 100%;
    background-color: #303030;
    overflow: auto;
    border-radius: 4px;
}

.navbar a {
    float: left;
    text-align: center;
    padding: 10px 50px;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.navbar a:hover {
    background-color: black;
    cursor: pointer;
}

.active {
    background-color: #030099;
}

.msg {
    vertical-align: top;
    font-family: verdana;
}

.submit {
    font-family: verdana;
    font-weight: bold;
}

.search .submit {
    background: #ddd;
    border: 1px solid black;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.search .submit:hover {
    background: #ccc;
    transition: all 0.3s ease;
}

.button {
    display: flex;
    height: 50px;
    padding: 0;
    background: #030099;
    border: none;
    outline: none;
    border-radius: 5px;
    overflow: hidden;
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.button:hover {
    background: #020082;
    transition: all 0.3s ease
}

.button:active {
    background: #030166;
}

.button__text,
.button__icon {
    display: inline-flex;
    align-items: center;
    padding: 0 24px;
    color: #fff;
    height: 100%;
}

.button__icon {
    font-size: 22.5px;
    background: rgba(0, 0, 0, 0.08);
}

.search{
    padding: 8px;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    width: 350px;
    margin-top: 8px;
    margin-right: 8px;
    float: right;
}

.search-submit {
    border-radius: 4px;
    border: none;
    padding: 4px;
    margin-top: 8px;
    margin-right: 8px;
    float: right;
    background: #bfbfbf;
}

.search-submit:hover {
    border-radius: 4px;
    border: none;
    padding: 4px;
    margin-top: 8px;
    margin-right: 8px;
    float: right;
    background: #a6a6a6;
    transition: all 0.3s ease
}


.refresh {
    float: right;
    margin-right: 8px;
    padding: 4px;
    border-radius: 4px;
    border: none;
    background: #bfbfbf;
    margin-top: -8px;

}

.refresh:hover {
    float: right;
    margin-right: 8px;
    padding: 4px;
    border-radius: 4px;
    border: none;
    background: #a6a6a6;
    transition: all 0.2s ease   
}

.calculator {
    border:1px solid black;
    width: 450px;
    padding: 10px;
    border-radius: 4px;
    background-color: #bfbfbf;
    float: right;
    padding-right: 100px;
}

.favcolor {
    border:1px solid black;
    width: 350px;
    padding: 10px;
    border-radius: 4px;
    background-color: #bfbfbf;
}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}

.html {width: 90%; background-color: #04AA6D;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}

<html>
    <div style="float: left">
    <table cellpadding="10" cellspacing="0" class="table1" style="height: 100px; bgcolor="white">
    <caption class="tc1"><strong>My PC Setup</strong></caption>
    <tr>
    <th>Component</th>
    <th>Part Name</th>
    <th>Notes</th>
    </tr>
    <tr>
    <td><strong>CPU:</strong></td>
    <td>Intel Pentium N3710 </td>
    <td>1.60GHz</td>
    </tr>
    <tr>
    <td><strong>RAM:</strong></td>
    <td>HP DDR4 4.00GB</td>
    <td>2.40GHz</td>
    </tr>
    </table>
    </div>
    <div class="calculator">
    <label style="margin-left: 175px; text-decoration: underline">Calculator</label>
    <br>
    <br>
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="b" name="b" value="0" /> +
    <input type="number" id="a" name="a" value="0" /> =
    <output name="result" for="a b"></output>
    </form>
    <br>
    <br>
    <form oninput="result.value=parseInt(a.value)-parseInt(b.value)">
    <input type="number" id="b" name="b" value="0" /> -
    <input type="number" id="a" name="a" value="0" /> =
    <output name="result" for="a b"></output>
    </form>
    <br>
    <br>
    <form oninput="result.value=parseInt(a.value)*parseInt(b.value)">
    <input type="number" id="b" name="b" value="0" /> x
    <input type="number" id="a" name="a" value="0" /> =
    <output name="result" for="a b"></output>
    </form>
    <br>
    <br>
    <form oninput="result.value=parseInt(a.value)/parseInt(b.value)">
    <input type="number" id="b" name="b" value="0" /> ÷
    <input type="number" id="a" name="a" value="0" /> =
    <output name="result" for="a b"></output>
    </form>
    </div>
    <div style="float: none">
    <p>HTML</p>
    <div class="container">
    <div class="skills html">90%</div>
    </div>

    <p>CSS</p>
    <div class="container">
    <div class="skills css">80%</div>
    </div>

    <p>JavaScript</p>
    <div class="container">
    <div class="skills js">65%</div>
    </div>

    <p>PHP</p>
    <div class="container">
    <div class="skills php">60%</div>
    </div>
    </body>
</html>

How can I fix this?

I think it's a transcription error, but you have an invalid `style` attribute on your table tag: `style="height: 100px; bgcolor="white">`. I'm guessing you meant to enclose the style property so that it is only applying `height 100px`? Assuming that's correct, I'd recommend applying the background color (white) as a CSS property too, rather than using deprecated HTML color attributes. — TylerH, Oct 17 '22 at 21:35
In case it is not clear from the duplicate target I assigned, replace `float: none` on the 3rd container with `clear: both`. `clear: both` is how you achieve what it is you were trying to achieve by typing `float: none`. — TylerH, Oct 17 '22 at 21:38
sorry, I kinda fucked up the code snippet, I was trying some things and forgot to remove them. But clear: both worked, so thanks! Also for some reason the quote marks for height: 100px; got removed, but they're present in my actual code. — BravoLima2k4, Oct 17 '22 at 21:45
By the way, how do i put a gap between the bottom of the calculator and my skill bars? — BravoLima2k4, Oct 17 '22 at 22:12

One element behind 2 others

0 Answers0