So i working on my integration of JS into my HTML and i want my web page to look some what presentable for a low level programmer. I have tried putting different divisions around and image (so two on the left vertically aligned and then an image the is the height of them combined in the gap on the right to fill the rest of that row. i have tried the normal method of:
#insertDivIdHere{
float:left;
}
#otherDivIdHere{
float:left;
}
#insertImgIdHere{
float:left;
}
This method ends up with some weird formatting issues where the divisions overlap and the objects (ie buttons and text boxes) disappear and the image is to low.
Here is the HTML and CSS if you want to try it out (but i've left out my JS because i see no point in sharing it:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700"rel="stylesheet">
<title>Intergration</title>
<script src="script.js"></script>
</head>
<body>
<div id="header">
<h1>Web intergration</h1>
</div>
<div>
<div id="formdiv" name="formdiv">
<form id="form" name="form">
First Name <input type="text" name="firstName"><br>
<br>
Last Name <input type="text" name="lastName"><br>
<br>
Email <input type="email" name="email"><br>
</form>
<br><br><br><br><br><br><br>
<button type="button" id="creds" onclick="validCreds()">Confirm</button>
</div>
<div id="ageRangeDiv">
<form id="ageRange" name="ageRange">
<input type="radio" name="R1" id="U13" checked>Under 13 <br>
<input type="radio" name="R1" id="U18">13-18 <br>
<input type="radio" name="R1" id="U30">19-30 <br>
<input type="radio" name="R1" id="U50">31-50 <br>
<input type="radio" name="R1" id="O50">Over 50 <br>
</form>
<br><br><br><br>
<button type="button" id="age" onclick="validAge()">Confirm</button>
</div>
<div>
<img src="eve.jpg" id="image">
</div>
</div>
</body>
</html>
#header{
font-size: 16px;
background-color:lightsteelblue;
padding:12px;
text-align:center;
}
#form{
height: 30px;
width: 100px;
}
#formdiv {
background-color: lightcyan;
padding:12px;
height: 200px;
width:300px;
float: left;
}
#ageRange{
height: 30px;
width: 120px;
}
#ageRangeDiv{
background-color: lightgrey;
padding:12px;
height:140px;
width:300px;
float: left;
}
#creds{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#age{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#image{
width: auto;
height: 340px;
float:left;
}
Thank you for any help you can provide