This is the content of <body> tag.
<div id="border">
<p><h1 style="text-align: center;">Welcome to ABC Airline!</h1></p>
<table caption="Choose your seat preference"
style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
<tr>
<td><p id="dd">Window Side<input type="radio" name="side"/></p></td>
<td><p id="dd">Front of plane<input type="radio" name="frontorback"/></p></td>
</tr>
<tr>
<td><p id="dd">Aisle Side<input type="radio" name="side"/></p></td>
<td><p id="dd">Middle of plane<input type="radio" name="frontorback"/></p></td>
</tr>
<tr>
<td><p id="dd">Center Seat<input type="radio" name="side"/></p></td>
<td><p id="dd">Back of plane<input type="radio" name="frontorback"/></p></td>
</tr>
</table>
<p><input type="submit" value="next" style="float: right;"></p>
</div>
styles are defined like this:
#border{
border: 2px solid black;
border-radius: 25px;
width: 50%;
margin: auto;
background-color: #ffc;
}
#dd{
margin: 0.2em 0.2em 0.2em 0.2em;
}
And, this is the result run with Chrome in macOS.
The button is on the right side as I intended but it's out of the div block.. When style="float: right;" is not defined, it is not aligned to right but in the border.
I'd like to keep this inside the border. What should I do?
Giving overflow: hidden fixes this. It is because of clearfix. This is the fix you are looking for:
#border {
overflow: hidden;
padding-bottom: 10px;
}
I have given an extra bottom padding to facilitate the whole button, instead of cutting it. You may even give a margin-right to the button to make it out of the border cut.
Snippet
#border {
border: 2px solid black;
border-radius: 25px;
width: 50%;
margin: auto;
background-color: #ffc;
overflow: hidden;
padding-bottom: 10px;
}
#dd {
margin: 0.2em 0.2em 0.2em 0.2em;
}
<div id="border">
<p>
<h1 style="text-align: center;">Welcome to ABC Airline!</h1>
</p>
<table caption="Choose your seat preference" style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
<tr>
<td>
<p id="dd">Window Side
<input type="radio" name="side" />
</p>
</td>
<td>
<p id="dd">Front of plane
<input type="radio" name="frontorback" />
</p>
</td>
</tr>
<tr>
<td>
<p id="dd">Aisle Side
<input type="radio" name="side" />
</p>
</td>
<td>
<p id="dd">Middle of plane
<input type="radio" name="frontorback" />
</p>
</td>
</tr>
<tr>
<td>
<p id="dd">Center Seat
<input type="radio" name="side" />
</p>
</td>
<td>
<p id="dd">Back of plane
<input type="radio" name="frontorback" />
</p>
</td>
</tr>
</table>
<p>
<input type="submit" value="next" style="float: right;">
</p>
</div>
Preview
The simple answer is 'use overflow auto to force BFC', like this:
overflow: auto;
Source: Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
Related
At the zoom level showed in the screenshot below, the Wired site displays normally:
But as I zoomed out I could see that everything is at the center. When I made a web page similar to the web site in the image and zoomed out, mine did not look like the image below.
This web page is still centered but mine was left-aligned:
I want to know how to make my web page stay centered when zoomed out.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
width: 1350px;
background-image: url("Images/background.png");
background-repeat: repeat-x;
background-size: 1366;
}
.flex-container {
display: flex;
background-color: #3B5998;
margin-left: -10px;
margin-top: -20px;
margin-right: -8px;
border-bottom: 1px solid #133783;
}
.flex-container > div {
background-color: #3B5998;
padding: 10px;
font-size: 13px;
}
input {
border: 1px solid #1D2A5B;
padding-bottom: 3px;
padding-top: 3px;
}
a {
text-decoration: none;
color: #9CB4D8;
}
a:hover {
text-decoration: underline;
}
.column {
float: left;
width: 450px;
padding: 10px;
height: 300px;
}
.big-input {
padding-bottom: 12px;
padding-top: 12px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="margin-left: 169px; margin-top: 10px;">
<img id="logo" style="margin-top: 16px;" src="Images/Facebook-img1.png" alt="LOGO" />
</div>
<div style="display: flex; margin-left: 30%; font-family: helvetica; color: white;">
<td>
<form action="redirect.html">
<table style="margin-top: 15px;">
<tr>
<td>Email or Phone</td>
<td style="display: flex; margin-left: 10px;">Password</td>
<td></td>
</tr>
<tr>
<td><input type="text" /></td>
<td style="display: flex; margin-left: 10px; margin-right: 10px;"><input type="password" /></td>
<td><input type="submit" value="Log In" /></td>
</tr>
<tr>
<td></td>
<td style="display: flex; margin-left: 10px;">Forgotten Account?</td>
<td></td>
</tr>
</table>
</form>
</div>
</div>
<div class="middle">
<div style="margin-left: 169px; margin-top: 5px;">
<div class="column" style="margin-right: 115px;">
<h2>Facebook helps you connect and share with the people in your life.</h2>
<img src="Images/Facebook-img2.png" alt="We are Connected" />
</div>
<div class="column">
<form action="redirect.html">
<h1>Creat an Account</h1>
<p>It's free and always will be.</p>
<table>
<tr>
<td style="display: flex; padding-right: 12px;"><input style="width: 170px;" type="text" class="big-input"/></td>
<td><input style="width: 170px;"type="text" class="big-input"/></td>
</tr>
<tr>
<td colspan="2"><input style="width: 358px;" class="dual big-input" type="text" /></td>
</tr>
<tr>
<td colspan="2"><input style="width: 358px;" class="dual big-input" type="text" /><td>
</tr>
</table>
<p>Birthday</p>
<label for="day">Date</label>
<input type="number" id="day" />
<label for="month">Month</label>
<input type="number" id="month" />
<label for="year">Year</label>
<input type="number" id="year" />
<span>Why do I need to provide my Date of birth?</span>
<input type="radio" id="male" />
<label for="female">Female</label>
<input type="radio" id="male" />
<label for="male">Male</label>
<p>By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.</p>
<input type="submit" value="Sign Up" />
<p>Create a Page for a celebrity, band or business.</p>
</form>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img style="display: flex; width: 1300px;" src="Images/last.png" alt="Last pic" />
</body>
</html>
try
body {
margin: 0 auto;
}
This will make your website center aligned, i think that is what you want to do.
They aligned that part to center.
<h1 align="center">Some text.......</h1>
This is center aligned so even if you zoom out, it will stay in the center.
I think you should have added spaces for aligning in the center in your website.
Their shell container most likely has a margin-left: auto; margin-right: auto; attribute with a max-width added.
This is what I have on my site to make it behave this way.
I am trying to float the submit button to the right in the form but I am facing problem the float is not being applied on the submit button Login. I have added some of server-side generated code.
Code
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" onSubmit='return false'>
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
Try this one. I set a colspan of 2 to the input button and gave its parent td a width of 100%, this along with the float right should shift it to the right.
#login-form{
width: 400px;
background-color: #6B0000;
color: white;
}
#loginButton{
color: #6B0000;
border: 1px solid;
padding: 5px 30px 5px 30px;
background-color: white;
border-radius: 3px;
/*This one here does not work */
float: right;
}
/* Make the input's parent td 100%, you may want
a class here instead for browser support */
td:last-child {
width: 100%;
}
<body>
<header id="header">
<h1>
Google Maps & Yahoo Mashup
</h1>
</header>
<DIV id="content">
<form id="login-form" name="login-form" method="post" >
<input type="hidden" name="login-form" value="login-form" />
<table>
<tbody>
<tr>
<td><label>Email</label></td>
<td><input id="login-form:email" type="text" name="login-form:email" /></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="login-form:pwd" type="text" name="login-form:pwd" /></td>
</tr>
<tr>
<!-- setting a colspan of two -->
<td colspan="2"><input type="submit" value="Login" id="loginButton" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" />
</form>
</DIV>
</body>
The title is a bit fuzzy, but here is want I want. I created a register form. I want the two error messages to be displayed next to the two input boxes but outside the whole form. Everything you see in the middle is in one div that is horizontally aligned to center.
I don't know if using the top property(%) can help placing them vertically but then I still need to align them to the right of the form.
Code:
<div id="container">
<div id="container_center">
<form name="RegForm" method="post" action="/validate_register2.php" onsubmit="getDatum()">
<table class="minden2">
<tr>
<td>
<h1 class="title">Register</h1>
</td>
</tr>
<tr>
<td>
<table class="cont2">
<tr>
<td class="hely">
<p><b>Username:</b></p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" class="aaa" id="form_username" maxlength="25" value="">
</td>
</tr>
<tr>
<td class='reg'>
<p class='le'><b>Password:</b></p>
</td>
</tr>
<tr>
<td>
<input class="tooltip" type="password" name="password1" id="form_password1" maxlength="25" value="">
</td>
</tr>
<tr>
<td class="reg">
<p class='le'><b>Email:</b></p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email1" class="i" id="form_email1" maxlength="254" value="">
</td>
</tr>
<tr>
<td>
<label id="c"><input type="checkbox" name="cb" id="acceptagreement" class="cb" onchange="enableSubmitButton()"/>I have read and
agreed to the Terms of use and Privacy Policy.</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="submit">
<input type="submit" name="submit" value="Register" id="submit" class="submitbtn"/>
</td>
</tr>
</table>
</form>
<p id='error1' >Error message 1<p>
</div>
</div>
#container {
border: 0px solid green;
margin:0;
}
#container_center{
border: 0px solid black;
width: 320px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background: #FFFFFF;
padding: 20px;
padding-bottom:15px;
padding-top:0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
box-shadow:0 0px 10px rgba(0, 0, 0, 0.5);
}
table.minden2 {
border:0px solid red;
border-collapse: collapse;
margin:0;
text-align:center;
width: 100%;
}
Full code available here:
http://www55.zippyshare.com/v/84179336/file.html
http://www63.zippyshare.com/v/98322849/file.html
You could use the fact that overflow can be displayed outside the parent div using a row div with wrapping disabled
white-space: nowrap;
and fixing the width of the container to the the desired amount.
See this example http://jsfiddle.net/sk96t/3/
You can notice that changing font size or spacing between the fields the error message keeps the vertical alignment.
Assuming the error messages come just before or after their associated form field, you could float the error messages right and give them a negative right margin. That will pull them outside of the containing div. Then you can play with the top margin on the error messages to get the vertical offset you're looking for. Just make sure overflow is visible on the containing div, or you'll hide the messages when they're shifted right.
If you want the two error messages to be displayed next to the two input boxes but outside the whole <form>, you can do it by placing your <form> tag just outside your <div> tag.
Show your code.
I have a simple contact form within a div but I can't get it to center within the div. I have tried margins, padding, text-align:center but none of them work.
html: http://www.joekellywebdesign.com/churchsample/contact.html
<div id="contactbottomright">
<h2>Contact Form</h2>
<form action="feedback.php" method="post">
<table border="0" cellpadding="8" cellspacing="8">
<tr>
<td>
<label for="tswname">Name</label>:</td>
<td>
<input type="text" name="fullname" id="tswname" size="25" />
</td>
</tr>
<tr>
<td>
<label for="tswemail">Email address</label>:</td>
<td>
<input type="text" id="tswemail" name="email" size="25" />
</td>
</tr>
<tr>
<td colspan="2">
<label for="tswcomments">Comments</label>
<br />
<textarea rows="15" cols="35" name="comments" id="tswcomments"></textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit" />
<br />
</td>
</tr>
</table>
</form>
</div>
css: http://www.joekellywebdesign.com/churchsample/css/styles.css
/* rules for contact page */
#contactbottomleft {z-index:26; width:450px;height: 700px; background-color:#92B681; margin: 30px 0 0 0; float:left;position: relative;}
#contactbottomright { z-index:27; width:450px; height: 700px; margin: 30px 0 0 0px; background-color:#428C3E; float:right;position: relative;}
form {
display: inline-block;
text-align: center;
}
/* end rules for contact page */
You could set a width to the form and then add margin: 0 auto; to the CSS. For example:
HTML:
<div>
<form></form>
</div>
CSS:
form {
margin: 0 auto;
width: 300px;
}
NOTE: For this to work, you must remove display:inline-block from form.
JS Fiddle Example (using your HTML/CSS).
You must set a Width of Ancestor element and then add margin:0 auto to its child.
See demo
I'm trying to right-align a dropdownlist similar to my textfields.
It works in firefox and IE, but I can't figure it out why it wont align properly in chrome.
HTML
<div id="metaDataEditInner">
<label>Document name</label>
<input class="field"></input>
<label>Document description</label>
<input class="field"></input>
<label>Document remarks</label>
<input class="field"></input>
<label>Document type</label>
<select class="dropdownfield">
</select>
<br />
<div style="clear:both">
<button id="test" class="defaultButton">Save metadata
</button>
</div>
</div>
CSS
#metaDataEditInner
{
margin: .5em 5px;
text-align: right;
width: 550px;
}
#metaDataEditInner label
{
float: left;
line-height: 1em;
margin-top: 3px;
}
#metaDataEditInner .field
{
border: 1px solid black;
width: 350px;
font-size: 12px;
line-height: 1em;
padding: 4px;
margin-bottom: 10px;
}
#metaDataEditInner .dropdownfield
{
border: 1px solid black;
width: 360px;
font-size: 12px;
line-height: 1em;
padding: 4px;
margin-bottom: 10px;
color:Black;
}
Any idea's ?
I've made a fiddle to illustrate the problem
http://jsfiddle.net/ZE5ss/2/
Thx!
I didn't want a say but if i saw you markup it's totally wrong.
1) Always put form element inside <form>.
2) input & button is an self closing element. Write like this:
<input class="field" />
<button id="test" class="defaultButton" value="Save metadata" />
3) select is not work without option Tag. Write like this:
<select class="dropdownfield">
<option></option>
</select>
Just remove the <br /> after the </select>. Works for me on chrome, see this fiddle.
Try this code its working fine in all the browsers:
<div id="metaDataEditInner">
<table>
<tr>
<td>
<label>Document name</label>
</td>
<td>
<input class="field"></input>
<tr>
<td>
<label>Document description</label>
</td>
<td>
<input class="field"></input>.
<tr>
<td>
<label>Document remarks</label>
</td>
<td>
<input class="field"></input>
<tr>
<td>
<label>Document type</label>
</td>
<td>
<select class="dropdownfield">
</select>
<tr>
<td> </td>
<td>
<button id="test" class="defaultButton">Save metadata
</button>
</tr>
</table>
</div>