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>
Related
I'm trying to come out with following card for profile details. But the grid system is not giving me the expected result. Any help will be greatly appreciated.
Output:
Expected result:
Code:
Here is how to do it using Grid:
It is very similar the main difference is grid-template-columns, I recommend using Flexbox since this is a 1-dimensional issue which is what Flex was built to solve. Flex and Grid are best used together :D
.grid-container {
display: grid;
width: 300px;
grid-template-columns: 1fr 3fr;
column-gap: 25px;
align-items: center;
border: 1px solid #f4f4f4;
}
.icon img {
height: 100px;
}
.info label {
display: block;
}
<div class="grid-container">
<div class="icon">
<img src="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png" />
</div>
<div class="info">
<label>First Name</label>
<label>Last Name</label>
<label>Position</label>
<label>Identification No.</label>
<label>Email</label>
</div>
</div>
I would recommend using Display Flex in the parent container also setting the labels to block elements so they go on separate lines.
.flex-container {
display: flex;
gap: 30px;
align-items: center;
border: 1px solid #f4f4f4;
width: 300px;
}
.icon img {
height: 100px;
}
.info label {
display: block;
}
<div class="flex-container">
<div class="icon">
<img src="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-Clipart.png" />
</div>
<div class="info">
<label>First Name</label>
<label>Last Name</label>
<label>Position</label>
<label>Identification No.</label>
<label>Email</label>
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
So, I am new at coding. I was trying to make a very basic static webpage of a calculator using html and css and js.
This is the html
#input {
margin: 0 auto;
}
#num {
border-radius: 25px;
background: #73AD21;
display: inline-block;
padding: 15px;
width: 200px;
height: 100px;
}
<body>
<div id="input">
<div id="num">
<label for="num1">Enter the first number</label>
<input type="number" name="num1" id="num1">
</div>
<div id="num">
<label for="num2">Enter the second number</label>
<input type="number" name="num2" id="num1">
</div>
</div>
<div id="op">
<div id="opadd"><input type="submit" name="add" class="add" value="Add" onclick="add()"></div>
<div id="opsbtrct"><input type="submit" name="subtract" class="sbtrct" value="Subtract" onclick="sbtrct()"></div>
<div id="opmult"><input type="submit" name="multiply" class="mult" value="Multiply" onclick="mult()"></div>
<div id="opdvde"><input type="submit" name="divide" class="add" value="Divide" onclick="dvde()"></div>
</div>
</body>
I want that the #num be centered horizontally.
I tried using
margin: auto;
and
margin: 0 auto;
but nothing works. Please help.
I've been at it for hours.
Here is the complicated way of doing this.
You should create a container div, so you can center the object in.
#container {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
when you add margin: 0 auto be sure the html tag not inline or inline-block it should be 'block' css with specific width.
#num {
border-radius: 25px;
background: #73AD21;
display: block;
padding: 15px;
width: 200px;
height: 100px;
margin: 1em auto;
}
label{
white-space: nowrap;
}
just replace this code hope your problem will fix.
add white-space:nowrap for the label to use one line text. #num should be 'block' css with specific width like 200px and display block. thanks
I am trying to get the text input on the same line as the h1 tag inline then display it as a flex-direction of column. But it only seems to want to set all the inputs in a line and with the h1 on top which is not what I want.
Here is what I mean.
here is the desired output:
.contactuscontent{
border: 1px solid pink;
display: flex;
}
.contactusinput {
display: inline-flex;
flex-direction: column;
border: 1px solid purple;
}
<div class="contactuscontent">
<div class="contactusinput">
<div class="name"><h1>Name</h1> <input type="text"> </div>
<div class="email"><h1>Email</h1> <input type="text"> </div>
<div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
</div>
</div>
You should look into semantics of HTML, <h1> is used for headlines.
If you want to add labels for input fields you should use <label for="...">. You can style the any tag in any way you want so default styling should not be a reason to use a tag at all.
.contactuscontent {
border: 1px solid pink;
display: flex;
justify-content: center;
}
.contactusinput {
width: 400px;
border: 1px solid purple;
}
.contactusinput>div {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.contactusinput label {
width: 200px;
}
.contactusinput input,
.contactusinput textarea {
width: 200px;
padding: 3px;
}
<div class="contactuscontent">
<div class="contactusinput">
<div class="name"><label for="name">Name</label> <input type="text" id="name" name="name"> </div>
<div class="email"><label for="email">Email</label> <input type="text" id="email"> </div>
<div class="refer"><label for="howtofind">How did you find us</label> <textarea id="howtofind"> </textarea> </div>
</div>
</div>
That's because h1 is a block element, and since it's inside an un-styled div, it will push the input in a new line.
If you make the div that wraps the h1 and the input as flexbox, it will look similar to the image:
.contactusinput div {
display: flex;
}
You don't need flexbox on any of the parents for this to work.
To push inputs in the same line you can add min-width to the h1:
h1 {
min-width: 200px;
}
You will need to apply different styling to smaller screens, likely removing the min-width and showing the h1 in a column instead of row.
Here is a jsFiddle
By the way, heading elements h1-h6 aren't meant for this. You generally want to have only one h1 in the entire site. The better option to use here would be label.
To make the design you want, it is needed to set flexbox on the div which contains input and h1.
So in this case, there will be 3 divs to have the flexbox design and all of them are the direct childs of .contactusinput selector.
So on style, you can set the .contactusinput > div (direct div child of .contactusselector) style to flexbox as follows.
.contactuscontent {
border: 1px solid pink;
display: flex;
}
.contactusinput {
display: inline-flex;
flex-direction: column;
border: 1px solid purple;
}
.contactusinput > div {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="contactuscontent">
<div class="contactusinput">
<div class="name"><h1>Name</h1> <input type="text"> </div>
<div class="email"><h1>Email</h1> <input type="text"> </div>
<div class="refer"><h1>How did you find us</h1> <input type="text"> </div>
</div>
</div>
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>
I don't understand why the three different rows are appearing on the same line. Don't rows usually appear on different lines? I even tried setting a fixed height for the rows and/or columns.
Here is the fiddle: https://jsfiddle.net/qvuo4bqw/
<div class="container-fluid">
<div id="bubble">
<div class="row">
<div class="col-md-12">
<h3 id="question">Question Here</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-inline">
<li>Disagree</li>
<label class="disagree" id="disagree-btn" val="0"></label>
<label class="disagree" val="0.5"></label>
<label id="neutral" val="1"></label>
<label class="agree" val="2"></label>
<label class="agree" id="agree-btn" val="3"></label>
<li>Agree</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-warning" id="back-btn">Back</button>
<button class="btn btn-primary" id="next-btn">Next</button>
</div>
</div>
<br><br>
</div>
.container-fluid {
padding-top: 5%;
display: flex;
justify-content: center;
align-items: center;
}
#bubble {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 100%;
height: 800px;
width: 800px;
border-color: black;
border-style: solid;
border-width: 5px;
background: linear-gradient(0deg, #AA3939 0%, #55AA55 0%);
color: white;
}
.row {
height: 150px;
}
ul>label {
width: 50px;
height: 50px;
border-radius: 100%;
border-style: solid;
cursor: pointer;
text-align: center;
}
.agree {
border-color: #226666;
}
.disagree {
border-color: #AA6C39;
}
#disagree-btn, #agree-btn {
height: 60px;
width: 60px;
}
#next-btn, #back-btn {
height: 50px;
width: 100px;
}
#neutral {
height: 40px;
width: 40px;
border-color: gray;
}
I don't understand why the three different rows are appearing on the same line.
Because your elements are in a flex container (#bubble has display: flex).
And two initial settings of a flex container are flex-direction: row and flex-wrap: nowrap, meaning child elements will align horizontally in a single line and not wrap.
If you want the children of #bubble to appear on different rows, here are a few options you can start with:
Switch to flex-direction: column, or
Enable flex-wrap: wrap, or
Switch to display: block
You are repeating the class = "row"
Try this instead:
<div class="container-fluid">
<div id="bubble">
<div class="row">
<div class="col-md-12">
<h3 id="question">Question Here</h3>
</div>
<div class="col-md-12">
<ul class="list-inline">
<li>Disagree</li>
<label class="disagree" id="disagree-btn" val="0"></label>
<label class="disagree" val="0.5"></label>
<label id="neutral" val="1"></label>
<label class="agree" val="2"></label>
<label class="agree" id="agree-btn" val="3"></label>
<li>Agree</li>
</ul>
</div>
<div class="col-md-12">
<button class="btn btn-warning" id="back-btn">Back</button>
<button class="btn btn-primary" id="next-btn">Next</button>
</div>
</div>
<br><br>
</div>
Well you have a couple issues, A) you have the .list-inline>li set to display: inline-block. So that's why there inline. B) Another issue I saw was that you have only 1 li inside your ul, everything else is labels. Which would probably make it appear inline to. If you want the labels not inside of an li element, then put them inside of a div of another li, either way this is not correct HTML formatting.