I am trying to make the right hand column the same height as the left hand side, the two columns are of different widths, split 25%, 75% with a form in the right hand column. I have tried several solutions, but cannot get the right hand column height to alter. Can anyone offer a solution please. The code I have written is below.
<?php
include "config.php"; //Connect to Database
?>
<!doctype html>
<html>
<head>
<title>Login Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* Header/Blog Title */
/* Header/Blog Title */
.header img {
float: left;
width: 80px;
height: 80px;
background: #f1f1f1;
}
.header h1 {
position: relative;
top: 18px;
left: 40px;
font-size: 30px;
text-align: center;
display: inline;
background: #f1f1f1;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
height: 30px;
display: block;
color: #f1f1f1;
font-size: 18px;
text-align: center;
padding: 5px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 25%;
}
/* Right column */
.rightcolumn {
float: left;
width: 75%;
background-color: #f1f1f1;
padding-left: 20px;
}
#wrap{
position:relative;
width:100%;
}
.input {
font-size: 15px;
}
form {border: 3px solid #f1f1f1;}
input[type=text] {
width: 100%;
padding: 10px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=text], input[type=password] {
width: 50%;
padding: 4px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 8px 14px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
span.psw {
float: right;
padding-top: 16px;
}
/* M33 image */
.m33image {
width: 100%;
max-width: 100%;
height: auto;
}
.jublogo {
width: 100%;
max-width: 100%;
height: auto;
}
.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
font-size: 15px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@media screen and (max-width: 300px) {
span.name {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="#wrap">
<div class="header">
<img src="images/BSA_logo.png" alt="BSAOC">
<h1>Despatch Data Search Facility</h1>
<p> </p>
</div>
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="#">Info</a>
<a href="login.html">Login</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Celebrating 60 Years</h2>
<div class="jublogo">
<img src="images/60_anniversay.jpg" alt="60th" class=".responsive" width="100%"height="100%"></div>
<p> </p>
<p> Some text</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<div align = "center">
<div style = "width:250px; margin-right:auto; margin-left:auto; margin-top: 30px; border: solid 1px #333333; " align = "left">
<div style = "background-color:#333333; color:#FFFFFF; padding:3px;"><b>Login</b></div>
<form action = "login.php" method = "post">
<div class="input">
<label>UserName :</label><input type = "text" name = "name" /><br />
<label>Password :</label><input type = "password" name = "pass" ><br/><br />
<div class="row">
<input type="submit" value="Login">
</div>
</div>
</form>
<?php session_start();?>
<?php if (isset($_SESSION['errors'])): ?>
<?php foreach($_SESSION['errors'] as $error): ?>
<br>
<span class="error"><font color='red'><?php echo $error; ?></font></span>
<?php endforeach; ?>
<?php endif; ?>
<?php unset($_SESSION['errors']); ?>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright © bsaownersclub.co.uk Rob Jones</p>
</div>
</body>
</html>
