Center Form Elements on Page with CSS - html

I've tried every way of centering elements in CSS that I know but I cannot get these form elements to center on the page.
My code: http://jsfiddle.net/VJLst/1/
<style>
#divQuizFillBlank {
margin-left: auto;
margin-right: auto;
}
#textQuizFillBlankUserAnswer {
border: 2px solid #000;
font-size: 16px;
font-weight: bold;
width: 80%;
height: 40px;
float: left;
box-sizing: border-box;
vertical-align: middle;
}
#buttonQuizFillBlankSubmit {
border: 2px solid #000;
font-size: 20px;
font-weight: bold;
width: 10%;
height: 40px;
float: left;
margin-left: 5px;
}
</style>
<div id="divQuizFillBlank">
<input type="text" id="textQuizFillBlankUserAnswer">
<input type="button" id="buttonQuizFillBlankSubmit" value=">">
</div>

You need to set the width for #divQuizFillBlank.
The rule margin: auto; doesn't work for elements without a width. Moreover, it works only for block elements and those elements take up full available width.
#divQuizFillBlank {
margin-left: auto;
margin-right: auto;
width: 80%;
}
Updated Fiddle: http://jsfiddle.net/praveenscience/VJLst/2/

Related

White Space Following float: left and clear: both

I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>

CSS/HTML: input bar width and button width not the same even though I'm setting it as the same

My assignment is to make a login page, and the inputs and buttons have to have a 320px width, including a 2px border and 15px padding. I create two classes for the inputs and button, and in CSS I am specifying these widths for both but the button keeps coming out shorter. Right now it's coming out like this: 1
I'm fairly new at this so I apologize if my code is messy/this might seem like a silly question.
Here's my code:
HTML
<form class="signup" action="/signup/" method ="post">
<fieldset name="sign-up">
<legend>Sign up</legend>
<div class="input">
<label for="email">Email</label></br>
<input class="inputbar" placeholder="foo#bar.com" type="email" name="email" id="email" required/></br>
<label for="password">Password</label></br>
<input class="inputbar" placeholder="1234passw0rd" type="password" name="password" id"password" required/></br>
</div>
</fieldset>
<button type="signupbutton">Sign up</button>
</form>
CSS
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
button{
background-color: mediumseagreen;
color: white;
}
Thanks everyone!
It's best to set the container width and then the elments inside to 100%. Using box-sizing: border-box; is key here.
* {
box-sizing: border-box;
}
.signup {
width: 320px;
padding: 40px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: white;
}
.signup fieldset{
border: none;
padding: 0;
margin: 0;
}
.input{
text-align: left;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 100%;
}
button{
background-color: mediumseagreen;
color: white;
}
.inputbar, button{
border: 2px solid lightgrey;
border-radius: 2px;
padding: 15px;
width: 250px;
}
It appears you have set the width of the button to 250px. Try changing that to 320px.
Remove the text align on th input class
.input{
text-align: left;
}
and do this
.signup .input label {
text-align: left;
display: inline-block;
width: 100%;
padding-left: 20px;
}
Aside that the everything is working alright in chrome
what browser are you using to run your test?
this is whati have on my browser

Trying to get button to stay centered on top border of div

I have a div that contains a button. This button needs to be centered on the divs top border, but for the life of me I can't seem to get it to work even after using floats. This needs to stay responsive as well as the button should always remained centered on the top border of the div.
Here's a picture of what I'm trying to to do.
.ThankYouReview {
display: block;
width: 90%;
background-color: #F3F5FB;
margin-left: 5%;
margin-right: 5%;
box-sizing: border-box;
margin-bottom: 5%;
margin-top: 5%;
border-radius: 5px;
}
.ActionButton {
border-radius: 17px;
background-color: blue;
color: white !important;
font-size: 12px;
width: 200px !important;
border: none;
padding: 10px 15px;
margin-bottom: -15px;
display:inline;
padding:10px;
margin-left: 31%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="ThankYouReview" id="pnlUserCommentsDisplayed" runat="server" visible="false">
<button type="button" ID="btn" class="ActionButton" OnClick="copyReviewToClipboard();" >Click Me</button>
<div class="Content" id="ReviewContent" runat="server" visible="true" >
<p>This is content inside the box that will also be displayed.</p>
</div>
</div>
Use the following CSS:
.ThankYouReview {
display: flex;
flex-direction:column;
align-items:center;
width: 90%;
background-color: #F3F5FB;
margin-left: 5%;
margin-right: 5%;
box-sizing: border-box;
margin-bottom: 5%;
margin-top: 5%;
border-radius: 5px;
background:black
}
.ActionButton {
border-radius: 17px;
background-color: blue;
color: white !important;
font-size: 12px;
width: 200px !important;
border: none;
padding: 10px 15px;
position:relative;
bottom:1em;
}

Problems with layout using Floats, Clear, Display - Not Understanding when to use what - Improper coding

I am making a Image upload result box, somehow I managed to give it proper layout but elements of the result box doesn't seem right in 'Brackets View'
I struggle when it comes to use floats, clear and display. I get confused, I've tried to learn it 4-5 times till now but somewhere I fail to apply them properly.
Can someone guide me through this code while explaining when and where to use them..
Also, I use this technique to clear floats but sometimes it works and sometimes nothing happens:
.example
{
content: ' ';
display: block;
clear: both;
}
My HTML & CSS:
.files-bar {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.delete {
float: right;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
width: 100%;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-thumb {
float: left;
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.img-thumb:after {
content: '';
display: block;
clear: both;
}
.image-name {
font-size: 17pt;
margin-top: 2px;
}
.image-size {
font-size: 13pt;
margin: 20px 0;
}
.file-status {
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap {
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter {
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up {
margin-left: 30px;
}
.cancel-upload {
float: left;
margin: -25px 0 0 -15px;
}
<div class="files-bar">
<button class="manage-btn delete">Delete</button>
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap">
<!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
Float is not a good strategy for layout as it requires managing floats with clear:both. clear will clear any floats defined previously, in this case your delete button that is floated right.
Please see this quick reference on float and clear properties.
As mentioned in a comment above, using display:flex will give you greater control over layout. Here is a solution with minimal change to your original code. I set display:flex on the container defined by div files-bar, created a container for progress and one for the delete button. Together with the img, these sibling elements are flex items. Here is a good tutorial on using flex.
And the complete code:
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
display:flex;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display:inline-block;
}
.button-cell {
text-align:right;
flex-grow:1;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap
{
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.progress {
position:relative;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<div class="button-cell">
<button class="manage-btn delete flex-item">Delete</button>
</div>
</div>
UPDATE – New snippet using absolute position within a relative positioned container.
Please review the following solution. Instead of using float, I positioned the elements absolute within the files-bar container. This will work in any browser.
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
position:relative;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position:absolute;
right:12px;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
float:left;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress {
position:absolute;
left:185px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<button class="manage-btn delete flex-item">Delete</button>
</div>
Layout Problem Solved!
The problem was that I wanted to put image on the left and other contents to the right of the image.
But there was too much use of floats, clear and display it was confusing also code was improper. And even though using them I was not getting the proper output. As the 'paragraph' element was also behind the image due to floats.
So, after some more trials I achieved that layout I wanted without using 'position' and too much of floats and clear.
What I Applied:
First, Floated the image to the left.
Put all of the other content below image inside a div class named 'rest'.
Floated 'rest div' to the left too.
Floated delete button to the right.
At last I've applied Clear Fix for "files-bar div."
It was simple that's it. All other elements adjusted itself. I just needed to put all other contents inside a div element and float it.
Updated HTML:
<div class="files-bar">
<button class="delete">Delete</button>
<img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
<div class="rest">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<p class="cancel-upload">✖</p>
<div class="progress-wrap">
<div class="progress-meter"></div>
</div>
</div>
</div>
Default HTML's CSS has been removed which is also known as 'Doctor CSS'
Updated CSS:
.files-bar
{
width: 100%;
max-width: 600px;
padding: 15px;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.files-bar:after
{
clear: both;
content: '';
display: block;
}
.image-thumb
{
float: left;
width: 160px;
height: 120px;
margin-right: 20px;
}
.rest {float: left;}
.delete
{
float: right;
width: 100px;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-name {font-size: 17pt;}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: inline-block;
font-size: 12pt;
margin-bottom: 15px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.cancel-upload
{
padding: 5px;
float: right;
cursor: pointer;
}

How can I make these buttons stack on top of each other centered after a window-width change?

I have a container that usually has a width of 400px. When the screen gets smaller, its width is reduced to 300px. These two values are static and don't change.
I have 3 buttons within this container. At the wider width, I'd like to have 2 side by side and the 3rd one on the line below. All of them are centered.
When the container is compressed, I'd like to have all the buttons stack on top of each other centered.
I can get it at the wide width but can't get it at the narrow width.
HTML:
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
</div>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
CSS:
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
display: inline-block;
margin-top: 10px;
}
.pg-3-buttons .prompt-gate-button {
float: left;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
.pg-sp2 > button {
}
.small-width {
width: 300px;
}
Fiddle: http://jsfiddle.net/je821vz9/10/
Used flex layout instead: http://jsfiddle.net/je821vz9/7/
Added this to .prompt-gate style and then cleaned up some of the conflicting HTML and CSS.
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
You could use a media query and have the viewport size decided on how to display the elements.
I added the following css to your body:
body {
max-width:400px;
min-width:300px;
}
We can then add a media query to adjust how the items are laid out:
#media (max-width: 300px) {
div.pg-3-buttons .prompt-gate-button {
display:block;
float:none;
}
}
See an updated version of your example and scale down the width of your browser to see the items pop in to place at 300px.
Somehow figured it out... removed floats and moved around the button HTML so that they were all in the same container.
http://jsfiddle.net/je821vz9/19/
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
</div>
<style>
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
margin-top: 10px;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
</style>