I am working on my first website combining HTML and JavaScript (haven't really gotten to the JS part); The "Personal Expense Totals" div has, at some point, invisibly extended downward and pushed the "Client Information" title to the right, when it was lined up at the left with the rest of the text. The link to my website is www.karybird.com/finances.html. Can anyone figure out what is wrong? Or is there an easier way to make this a separate that just floats randomly so it's not tied to the "Personal Expenses" div?
I also have another question: why is it that when my CSS is internal, the page looks like I want it to, but when I link it to an external stylesheet, the design changes maybe 25%?? Little things are off, like the tables in the "Totals" boxes are gone, or the text is a different font; things aren't really lined up right. (I can't imagine what this code will look like copy pasted lol; internally and when I'm doing it in VSC it looks great, but codepen was eeek). But it looks fine online. What's up with that?
Pretty sure I've MacGyvered a lot of things, so don't kill me haha.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<script type = "text/javascript" src="expenses_and_clients.js"></script>
<title>Expenses and Client Finances</title>
<!--tried linking to an external file with exact same css, but it totally changed the look that I liked and wanted
<link rel="stylesheet" type="text/css" href="finances.css">-->
<style>
html {
background: #b9e6cc;
padding: 5%;
padding-top: 150px;
font-family:"tablet-gothic", verdana, arial, sans-serif;
width: 1100px;
margin: auto;
}
h2 {
margin-bottom: 50px;
}
h3 {
margin-top: 0;
}
#heading {
background: rgba(246,247,146,0.9);
padding: 4%;
margin: 20px 20px 50px 15px;
left: 2%;;
top: 3.5%;
max-width: 500px;
min-width: 500px;
position: absolute;
display: inline-block;
}
#personalExpenses {
background: floralwhite;
padding: 5%;
text-align: right;
width: auto;
margin: auto;
height: auto;
margin-top:100px;
}
#personalExpenses input {
width: 50px;
}
#clientInfo {
background: #64C9D9;
padding: 5%;
text-align: left;
width: auto;
height: auto;
margin-top: 150px;
}
#clientInfo input {
width: 50px;
}
#clientCheckbox {
display: inline-block;
text-align: center;
float: right;
position: relative;
top: -90px;
}
.radiobutton {
margin-right: 30px;
}
#summary {
background: rgba(234,46,73,0.9);
color: floralwhite;
padding: 5%;
width: auto;
margin-top: 75px;
}
#summary p {
display: inline;
}
#totalsBox p {
display: inline;
margin-right: 20px;
}
#totalsBox {
background: #333;
color: floralwhite;
opacity: 92%;
height: 200px;
padding-top: 7%;
padding-bottom: 5%;
padding-left: 3%;
padding-right: 3%;
position: relative;
top: -200px;
}
#totalsBox h3 {
text-align: center;
}
#totalsBoxTable {
border-collapse: collapse;
font-size: 0.9em;
min-width: 100px;
margin: 0 auto;
position: relative;
top: 10%;
}
#totalsBoxTable tr {
display: block;
float:left;
border: 1px solid floralwhite;
}
#totalsBoxTable th, td {
display: block;
padding: .3em;
}
th {
text-align: right;
}
td {
text-align: left;
}
.expensesTotals {
float: left;
top: -100px;
}
.clientTotals {
float: right;
top: -100px;
}
footer {
margin-top: 25px;
}
</style>
</head>
<body>
<div id="heading">
<h1>Personal and Client Finances</h1>
<p>This program was created to calculate potential earnings for host home client situations,
as well as tracking personal expenses.</p>
</div>
<div id="personalExpenses">
<!--Probably don't need a submit button, actually prefer not having one, but we'll figure that out later-->
<h2>Personal Expenses</h2>
<p>**Enter only numbers in each field.</p>
<p>How much is your rent/mortgage payment each month? <input id="rent"><!--Could put "submit" button here, but really don't think you need to once the field has input. <button>Submit</button>--></p>
<p>How much do you spend on utilities? <input id="utilities"></p>
<p>How much do you spend on food each month? <input id="food"></p>
<p>How much do you spend on transportation each month? <input id="transport"></p>
<p>How much do you spend on miscellaneous things each month? <input id="misc"></p>
<div id="totalsBox" class="expensesTotals">
<h3>Personal Expense Totals</h3>
<table id="totalsBoxTable">
<tr>
<th>Monthly</th>
<th>Yearly</th>
<th>5 Years</th>
<th>10 Years</th>
</tr>
<tr>
<td>Monthly</td>
<td>Yearly</td>
<td>5 Years</td>
<td>10 Years</td>
</table>
</div>
</div>
<div id="clientInfo">
<h2>Client Information</h2>
<div id="clientCheckbox">
<fieldset>
<legend>How many clients do you have?</legend>
<label class="radiobutton" for="1">
<input type="radio" id="1" name="client" value="one">
1</label>
<label class="radiobutton" for="2">
<input type="radio" id="2" name="client" value="two">
2</label>
<label class="radiobutton" for="3">
<input type="radio" id="3" name="client" value="three">
3</label>
</fieldset>
</div>
<p>**Enter only numbers in each field.</p>
<p> <input> After number is selected, enter dollar amount from first client.</br>
<input> Enter dollar amount from second client if applicable.
<br>Or how do I get another input field to show up when 2 or 3 clients is selected?</p>
<p> <input> How much do you get paid for your client?</p>
<p> <input> How much does your client pay in rent?</p>
<div id="totalsBox" class="clientTotals">
<h3>Client Income Totals</h3>
<table id="totalsBoxTable">
<tr>
<th>Monthly</th>
<th>Yearly</th>
<th>5 Years</th>
<th>10 Years</th>
</tr>
<tr>
<td>Monthly</td>
<td>Yearly</td>
<td>5 Years</td>
<td>10 Years</td>
</table>
</div>
</div>
<div id="summary">
<h2>Summary</h2>
<p>Total Expenses</p> <p>Total Income</p>
<p></p>
</div>
<footer>© Kary Bird, 2022</footer>
</body>
</html>