I'm fairly new to HTML and CSS and I am trying to align the Heading and the search on the same line but I got stuck. Here is the HTML:
HTML:
<header>
<h1 id="Heading">Welcome Home</h1>
<form id="search">
<label for="keywordBox">Search: </label>
<input id="keywordBox" type="text" name="keywordsrch">
</form>
</header>
How do I align the Heading with the form? Thanks for your help!
The old way would be to float the header elements like so:
<style type="text/css">
header > h1,
header > form {
float: left;
}
header {
clear: both;
}
</style>
Alternatively, the more modern and arguably better way would be to use CSS grids to do this, like so:
<style type="text/css">
header {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
The value 1fr means "one flexible unit" and is proportional to other flexible units. Thus, in this case, it would be equivalent to 50% 50%.
header {
padding: 10px;
}
#heading,
#search {
display: inline-block;
margin: 0;
}
#search {
float: right;
}
<header>
<h1 id="heading">Welcome Home</h1>
<form id="search">
<label for="keywordBox">Search: </label>
<input id="keywordBox" type="text" name="keywordsrch">
</form>
</header>
body{
margin: 0px;
}
header{
padding: 0px 15px;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: space-between;
}
#search {
margin: 0px;
}
<header>
<h1 id="Heading">Welcome Home</h1>
<form id="search">
<label for="keywordBox">Search: </label>
<input id="keywordBox" type="text" name="keywordsrch">
</form>
</header>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 months ago.
I just designed a simple sign-in form to practice CSS and HTML but I can't align 2 divs horizontally to input my name and surname.
Actually, I can't understand why if I apply a width of 50% they are stuck on top of each other and if I apply 49% width they are perfectly horizontally aligned as I want.
MY CSS (child width 50%):
I'm expecting with the child property set to 50% they should take 50% of the parent space.. but actually not, why?
what I'm doing wrong, why have to reduce the width to 49% to align them horizontally
see my image 50% width:
I want them aligned side by side like here:
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
background-color: red;
width: 100%;
}
.child{
width: 50%; <--------- HERE THE ISSUE
display: inline-block;
}
<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label><br>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label><br>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>
You can use flex-box to achieve this,
I have added this in parent,
display: flex ;
align-items: center;
justify-content: space-evenly ;
You also have to remove width: 50%; from the .child class and add the following CSS,
display:flex ;
align-items:center;
justify-content:center ;
flex-direction:column;
margin: 4px;
Now you can add further CSS as you want.
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
background-color: red;
display:flex ;
align-items:center;
justify-content:space-evenly ;
}
.child{
display:flex ;
align-items:center;
justify-content:center ;
flex-direction:column;
margin:4px ;
}
<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>
If I understand your question correctly this should help. First what you want to do is understand what Flex is in html, this first helped me to understand flex.
So you want to add display: flex; to your container/.parent to tell the script that the container is a flex element. After that you should add text-align: center; to center the text inside the .parent. Finnaly, add justify-content: space-evenly; so this way all of the items inside the .parent are spaced evenly from each other.
Also a lot of the things that you put in .child I removed becasue they where unnecessary to achieve what you are going for. I did add margin: 5px; just to make it look more visually appealing.
Your finished code should look like this
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
display: flex;
background-color: red;
width: 100%;
text-align: center;
justify-content: space-evenly;
}
.child{
margin: 5px;
}
<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label><br>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label><br>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>
Hope this will be close to your desired result, I added some CSS to match the posted HTML.
Each input is centered in a box half of the container with flex: 1, so there is no need to set width in the code.
You can add more child field here, and the layout will scale naturally.
Example:
.title {
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper {
margin: 0;
padding: 0;
background-color: yellow;
}
.parent {
background-color: red;
flex: 1;
display: flex;
justify-content: center;
}
.child {
color: #fff;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label><br />
<input type="text" id="Name" name="fname" />
</div>
<div class="child">
<label for="Surname">Surname:</label><br />
<input type="text" id="Surname" name="fsurname" />
</div>
</div>
</div>
</form>
</div>
Have a section id="contact" where I am trying to put a heading and a brief one sentence description underneath in one column and an email submit form with a submit button under the input field in the right column. I want the email input element to reach across the entirety of the right column and have the button left aligned to it's edge underneath it. I have a sketch to show what I am looking for attached.
So far this section does everything I want it to do right now, however the top elements under the bottom elements are not left edge aligning although the class items .latest-from-here .input-email (nested inside the parent section #contact) are justify-self:start; align-self: center;.
https://codepen.io/holmedw/pen/KrvJEb
Sketch:
#contact {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: left;
grid-column-gap: 80px;
margin-left: 80px;
margin-right: 80px;
height: 480px;
align-items:center;
}
.latest-from-here .input-email {
position:relative;
z-index: -1;
justify-self:start;
align-self: center;
}
if you removed justify-items: left; in #contact and added width:100% to your input field that will solve the problem.
*{
box-sizing:border-box
}
#contact {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 80px;
margin-left: 80px;
margin-right: 80px;
height: 480px;
align-items:center;
}
.latest-from-here .input-email {
position:relative;
z-index: -1;
justify-self:start;
align-self: center;
}
.email{
width:100%
}
<section id="contact">
<div class="latest-from-here">
<h2>Get the latest from Aer</h2>
<p>Don't miss out on new arrivals, offers and events.</p>
</div>
<div class="input-email">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Enter your email" class="email" required/>
<div></div>
<input id="submit" type="submit" value="Submit" class="btn-submit"></input>
</form>
</div>
</section>
I have a simple input tag in a form element
<form>
<input type="text" name="" value="">
</form>
I wanted the input tag to look really big. So I add this:
input {
height: 300px;
}
However, the problem which bugs me is that the cursor of the input tag is located exactly at the centre of the height.
I want the cursor to be at the very top. How do I position the cursor?
Input is a one-line thing - so there is no sence to have it larger then caret.
That's why you have a choice between two options.
To use a large font with the input element:
<div class="input-wrapper">
<form>
<input type="text" name="" value="">
</form>
</div>
<style>
input {
font-size: 100px;
width: 50vw;
}
.input-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body {
margin: 0;
}
</style>
Or use textarea:
<div class="textarea-wrapper">
<textarea rows="25" cols="100"></textarea>
</div>
<style>
.textarea-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body {
margin: 0;
}
</style>
I have two block elements that I would like to be on the same horizontal line. One is a FORM and the other is a DIV.
<div id="miningArea">
<form id="curWorkForm">...</form>
<div id="buttonDescription">
To begin, click thde "Start" button.
</div>
</div>
I thought adding display:inline-block was the key to keeping the elements on the same line. But when I add
#buttonDescription {
display: inline-block;
}
My text element still appears beneath my FORM element -- https://jsfiddle.net/5j57hkLr/6/ . How can I get that other DIV element to appear on the same line?
When there is a lot of text, you have to limit the width of inline-block elements by applying width settings to them which allow both elements to fit into one line, for example width: 50% and width: 45%
Otherwise they will by default expand according to the text, which will result in 100% width when there's enough text to fill a full line.
These are the the 3 ways ways I would think about approaching this:
(Here is a your JSFiddle back with some changes.)
1:
.wrapper {
overflow: hidden;
border: red dashed 1px;
/* For Testing*/
}
.style {
margin: 0;
padding: 10px;
float: left;
}
<div class="wrapper">
<form>
<input class="style" placeholder="Enter Value" />
</form>
<button class="style">Submit</button>
</div>
2: Responsive
* {
box-sizing: border-box;
margin: 0;
}
input, button {padding:10px;}
input {width: 100%;} /* replace "input" with "input , button" if you want the button to take up full with*/
.column {
float: left;
width: 50%;
border: red dashed 1px; /*For Testing*/
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="row">
<div class="column">
<form>
<input class="style" placeholder="Enter Value" />
</form>
</div>
<div class="column">
<button class="style">Submit</button>
</div>
</div>
3:
* {
box-sizing: border-box;
margin: 0;
}
#mainWrapper {
overflow: hidden;
display: inline-block;
}
button,
input {
width: 100%;
padding: 10px;
}
.formWrap {
float: left;
width: 300px;
}
.btnWrap {
float: left;
width: 100px;
}
<div id="mainWrapper">
<div class="formWrap">
<form>
<input placeholder="Enter Value" />
</form>
</div>
<div class="btnWrap">
<button>Submit</button>
</div>
</div>
add this to your css
#buttonDescription,form {
display: inline-block;
vertical-align:middle;
}
Inorder for two or more elements to be on same line, all the elements should be made display: inline or inline blocks
Here is a working example: https://jsfiddle.net/6wjftgf2/2/
#buttonDescription,form {
display: inline-block;
}
<div id="miningArea">
<form id="curWorkForm"><input placeholder="My Form"/></form>
<div id="buttonDescription">
<button>My Button</button>
</div>
</div>
You can also use flex for this work the code is as follows
.miningArea
{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
form
{
width: 60%;
}
div
{
width: 40%;
}
.miningArea {
display: flex;
flex-wrap: wrap;
}
form { width: 60%; }
div { width: 40%; }
I have the following issue, I have forms with inputs inside flex-wrap, but in few forms I have <textarea rows="5"></textarea> and it takes more height than an input field. Is it possible to have the following structure inside flex-wrap:
Have these 2 input fields one below the other, but in their .holder divs?
https://jsfiddle.net/by06rreq/
CSS:
.flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.holder {
width: 30%;
}
input, textarea {
width: 100%;
}
.holder.textarea {
width: 65%;
}
HTML:
<div class="flex">
<div class="holder textarea">
<textarea name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
</div>
<div class="holder">
<input type="text">
</div>
</div>
You can see.. Do you want like this. I have tried with multi-layout css. through column-count
.flex {
column-count: 2;
column-gap: 0;
}
.holder {
width: 50%;
margin-bottom: 15px;
}
input, textarea {
width: 100%;
}
.holder.textarea {
width: 65%;
margin-bottom: 0;
}
<div class="flex">
<div class="holder textarea">
<textarea name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
</div>
<div class="holder">
<input type="text">
</div>
</div>
I'm not 100% sure on what you're asking for & I can't comment due to lack of reputation so I have no option to make a guess in an answer.
So you'd like a similar layout to this?
-TextArea-
-Input-
-Input-
You could apply display: block and width: 100% to your .holder class, and then adjust the size of your input controls through their relevant css classes.
If I've completely misunderstood what you're trying to achieve, just comment and I'll see if I can help you further :)
EDIT:
After reading your recent comments I can offer another solution. however, it isn't using flex.
.block {
width: 100%:
display: block;
}
.textarea {
display: inline-block;
width: 30%;
}
.textarea textarea {
width: 100%;
}
.holder {
display: inline-block;
vertical-align: top;
}
.holder input {
display: block;
vertical-align: top;
}
<div class="block">
<div class="textarea">
<textarea class="textarea" name="test" rows="5"></textarea>
</div>
<div class="holder">
<input type="text">
<input type="text">
</div>