I'm trying to build an inline forum in wordpress with html and css. I have a problem because the form doesn't appear inline way but in a normal one,
here you find the codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>newsletter</title>
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
<p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
</div>
<form class="form-inline" method="post" action="the link">
<div id="mc_embed_signup_scroll">
<div class="form-inline"><input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required=""><input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required=""></div>
<div class="form-inline"><button class="btn btn-primary" type="submit">Subscribe </button></div>
</form>
</div>
</div>
</body>
</html>
and i have this CSS, i haven't included it in HTML because i'm in wordpress
h2{font-size:24px;font-weight:700;margin-bottom:25px;line-height:1.5;padding-top:0;margin-top:0;color:inherit}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center; }
.form-inline {
flex-direction: column;
}
.newsletter-subscribe
.intro{font-size:16px;max-width:500px;margin:0 auto 25px}.newsletter-subscribe
.intro p{margin-bottom:35px}
.newsletter-subscribe
.newsletter-subscribe
form .form-control{background:#eff1f4;border:none;border-radius:3px;box-shadow:none;outline:0;color:inherit;text-indent:9px;height:45px;margin-right:10px;min-width:250px}.newsletter-subscribe
That's what i see
So here we go to achieve this, you have to remove this piece of code from your styles:
.form-inline {
flex-direction: column;
}
Why though?
Because flex-direction: column; will make every one of your div children as an independent row, and whole of them as a column. Like the one, you achieved earlier.
Then the next step to achieve and inline form inputs and buttons here is to move your button tag out of the independent division with the same class and wrap all of them into a single div just like this:
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe</button>
</div>
The final cut
At the end all of your code will be something like the below snippet:
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe .newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: 0;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>newsletter</title>
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
<p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
</div>
<form class="form-inline" method="post" action="the link">
<div id="mc_embed_signup_scroll">
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
UPDATE
So to make space between these inputs you should add margin property to each of div children, just like below:
.form-inline input, .form-inline button {
margin: 0 5px;
}
Then the final output will be like this:
h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
padding-top: 0;
margin-top: 0;
color: inherit;
}
.form-inline {
display: flex;
justify-content: center;
align-items: center;
}
.form-inline input, .form-inline button {
margin: 0 5px;
}
.newsletter-subscribe .intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto 25px;
}
.newsletter-subscribe .intro p {
margin-bottom: 35px;
}
.newsletter-subscribe .newsletter-subscribe form .form-control {
background: #eff1f4;
border: none;
border-radius: 3px;
box-shadow: none;
outline: 0;
color: inherit;
text-indent: 9px;
height: 45px;
margin-right: 10px;
min-width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>newsletter</title>
</head>
<body>
<div class="newsletter-subscribe">
<div class="container">
<div class="intro">
<h2 class="text-center"><strong>SCATTARE FOTOGRAFIE, FARE VIDEO E POTER VIAGGIARE CON QUESTA PASSIONE</strong><br></h2>
<p class="text-center">Come scattare le tue migliori fotografie, realizzare video che tutti ammireranno, crescere sui social lavorando con ciò che ami e milgiorando le tue tecniche </p>
</div>
<form class="form-inline" method="post" action="the link">
<div id="mc_embed_signup_scroll">
<div class="form-inline">
<input class="form-control form-control-sm" type="text" placeholder="Il tuo nome..." name="FNAME" required="">
<input class="form-control" type="email" name="EMAIL" placeholder="La tua migliore email..." required="">
<button class="btn btn-primary" type="submit">Subscribe </button>
</div>
</form>
</div>
</div>
</body>
</html>
NOTE: The property margin is shorthanded for margin: /*margin-top margin-right margin-bottom margin-left*/ so if you use it like this: margin: 0 5px the top and bottom margins will be 0 and the right and left margins will be 5px.
Related
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>
Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.
I have a webpage with a grid at the top, at the bottom I would like to include for elements but outside of the grid. When ever I try this nothing works and the form in part of the grid set up. What ever changes i make the size of the grid cell above it will change to match.
Here is my HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TT284 EMA Question 1 Walking Events</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="walkEvents.css" />
</head>
<header>
<figure id="logo">
<img src="image goes here">
</figure>
</header>
<body>
<nav id="mainMenu">
<ul>
<li>
Walking Events
</li>
<li>
Other Events
</li>
<li>
Menu Option 3
</li>
<li>
Menu Option 4
</li>
<li>
Menu Option 5
</li>
<li>
Sign Out
</li>
</ul>
</nav>
<section class="gridInfo">
<header id="pageTitle">
<h1>Walking Events</h1>
</header>
<div>
<h2>Planned Walks</h2>
<p>List of planned walks will be here, starting with soonest first</p>
</div>
<div>
<h2>Walk History</h2>
<p>List of previous walks, starting with the walk finished sooner</p>
</div>
<div>
<h2>Proposed Walks</h2>
<p>List of proposed walks, sorted by date proposed with the oldest first</p>
</div>
<div>
<h2>Rejected Walks</h2>
<p>List of previously rejected sorted by order of rejection</p>
</div>
<div class="results">
<h2>Search Results</h2>
<p>Show results of search query</p>
</div>
</body>
<footer>
<section class="forms">
<div class="walkForm">
<h2>Proposals</h2>
<p id="text"><b>Name of Walk: </b><input class="form" type="text" name="nameOfWalk" size="30" maxlength="30" /></p>
<p id="text"><b>Date: </b><input class="form" type="date" name="date" size="30" maxlength="30" /></p>
<p id="text"><b>Start time: </b><input class="form" type="time" name="startTime" size="30" maxlength="30" /></p>
<p id="text"><b>Meeting point: </b><input class="form" type="text" name="meetingPoint" size="30" maxlength="30" /></p>
<p id="text"><b>Distance in miles: </b><input class="form" type="number" name="distance" size="30" maxlength="30" /></p>
<p id="text"><b>Notes: </b><input class="form" type="text" name="notes" size="30" maxlength="300" /></p>
<p><select name="status">
<option value="proposed">Proposed</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
</p>
<p><input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /></p>
</div>
<div class="searchForm">
<h2>Search</h2>
<p id="text"><b>Name of Walk: </b><input class="form" type="text" name="nameOfWalk" size="30" maxlength="30" /></p>
<p id="text"><b>Date: </b><input class="form" type="date" name="date" size="30" maxlength="30" /></p>
<p id="text"><b>Start time: </b><input class="form" type="time" name="startTime" size="30" maxlength="30" /></p>
<p id="text"><b>Meeting point: </b><input class="form" type="text" name="meetingPoint" size="30" maxlength="30" /></p>
<p id="text"><b>Distance in miles: </b><input class="form" type="number" name="distance" size="30" maxlength="30" /></p>
<p id="text"><b>Notes: </b><input class="form" type="text" name="notes" size="30" maxlength="300" /></p>
<p><select name="status">
<option value="proposed">Proposed</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
</p>
<p><input type="submit" name="search" value="Search" /> <input type="reset" name="clear" value="Clear" /></p>
</div>
</section>
</footer>
</html>
CSS code below;
nav li {
display: inline-block;
list-style-type: none;
border: 1px solid #fff;
padding: 0.5rem;
font-size: 25px
}
nav {
grid-row: 1;
grid-column: 1 / -1;
text-align: center;
}
body section {
display: grid;
grid-gap: 1rem;
grid-template-rows: 50px 250px 250px 250px;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
border: none;
padding: 1rem;
}
section header {
grid-column: 1 / -1;
}
h1 {
column-span: all;
text-align: center;
font-size: 35px;
}
body div {
border: 1px solid #aaa;
padding: 1rem;
}
footer div {
border: none;
}
#text, select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit]{
width: 50%;
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset]{
width: 50%;
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.results{
column-span: all;
text-align: center;
}
This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Closed 2 years ago.
Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form fieldset > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form section > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<section id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</section>
</form>
</body>
</html>
flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).
Remove unnecessary elements, justify-content will take care the things in your case.
make things simpler than making it complicated.
.MainDiv {
display: flex;
width: 100%;
justify-content: space-around;
}
.MainDiv>div {
width: 25%;
text-align: center;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div class="MainDiv">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
I am trying to make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>