I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
height: 100vh;
}
body{
color:white;
height: 100%;
min-width: 100%;
background: url("images/friends.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container{
height: 100%;
width: 100%;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin: 0;
}
/*navigation styling*/
#navbar{
display: flex;
justify-content: space-between;
}
#navbar ul{
display:flex;
align-items:center;
list-style:none;
}
#navbar ul li a{
text-decoration:none;
padding:.75rem;
}
header nav li a:hover{
color:red;
transition:.75s;
}
/*login modal styling*/
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
display: none;
}
#login-content{
height:80%;
width:25%;
position:relative;
background-color:red;
border-radius:2%;
display:flex;
flex-direction: column;
justify-content:center;
text-align:center;
}
.close{
position:absolute;
top:0;
right:5%;
cursor:pointer;
font-size: 30px;
}
.login-input{
display:block;
margin: 0 auto 1.5rem auto;
padding:.5rem;
border: 2px solid black;
border-radius:24px;
}
#login-logo{
height:6rem;
width:6rem;
margin-bottom: 2rem;;
}
.agreement{
margin:1.5rem 1rem;
}
/*remove border on inputs, etc.*/
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.button{
width: 6rem;
height: 2.5rem;
color: red;
background-color:white;
border-radius:24px;
border:none;
cursor:pointer;
}
.button:hover{
color:white;
background-color: #861111;
transition:.75s;
}
a{
color:white;
}
/*main description of site for homepage*/
.maindescription{
margin:2rem;
}
.description-header{
font-size:4rem;
margin-bottom:.5rem;
}
.description{
margin-bottom: .75rem;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16"
href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div id="branding">
<a href="indexresolve.html"><img src="images/lasttry.png"
alt="resolvelogo"></a>
</div>
<ul>
<li><a href="indexresolve.html"Home></a></li>
<li><a class="current" href="howitworks.html">How It
Works</a></li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button>
</li>
</ul>
</nav>
<!-- Login Modal -->
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<div>
<img id="login-logo"
src="images\free_horizontal_on_white_by_logaster.jpg">
</div>
<form>
<input class ="login-input" type="text"
placeholder="username" >
<input class ="login-input" type="password"
placeholder="password">
<button class="button" id="modalbutton">Log
In</button>
</form>
<p class="agreement">By clicking log in, you agree
to our Terms, <a href="privacy.html">Privacy
Policy</a>, and
our Cookie Policy.</p>
<P><a href="forgotpasswords">Forgot Username or
Password?</a></P>
</div>
</div>
<!--End Login Modal-->
</nav>
</header>
<section>
<!--Guys-->
<div class="container2">
<div class="maindescription">
<h1 class="description-header">Guys</h1>
<h2 class="description">Resolve is the new way to improve
your dating life. Get real women's unbiased feedback on your
dating profiles, the way you dress, your body language,
conversational skills, and more. Real, actionable advice on how to become a
man
that women will desire.</h2>
<button class="button">Get Started</button>
</div>
<!--Ladies-->
<div class="maindescription">
<h1 class="description-header">Ladies</h1>
<h2 class="description">dhkjfdah jdhfakjh jhafdkjh kjhfdalkjf lkjafhd
fhkahuf kjeuud eeuiw udhakje huidhf aufhlahfa fuashfeudhfyus fuaifhdsh
khadf alufhaliufhalifhaf sf! </h2>
<button class="button">Get Started</button>
</div>
</div>
</section>
<script src="resolve.js"></script>
</body>
</html>
I want my background image to cover 100% of the browser window, I do not care if it is cropped. Right now at a certain size, it cuts off at the bottom. I tried putting the background image in the HTML selector in CSS instead of the body selector but that did not work. Overflow: hidden worked but it cut off the content as well.
Here is my jsfiddle :https://jsfiddle.net/benmikola66/vu6btxpw/3/
You could change body to:
body {
color:white;
height: 100%;
min-width: 100%;
background: url("https://i.postimg.cc/5tJtgDD1/friends.jpg") no-repeat center center fixed;
background-size: cover;
}
Here is the fiddle
I created my first email template (exercise). In the beginning I did it without tables, but later I converted it to tables. Now I have a mess; I'd like to center all text and the header, but I don't know how. I've used table-align but it did not work.
Code before (divs):
https://jsbin.com/pusokiyido/edit?html%2Coutput
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>emailer</title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body {
/*font-size: calc 8px + (16 -8) * ((100vw - 200px) / (1200 - 200))); */
color:white;
}
}
.emailer-background {
background:#eee;
}
.emial-container {
max-width: 700px;
background: #fff;
font-family: sans-serif;
text-align: center;
margin: 0 auto;
display:block;
overflow: hidden;
border-radius: 5px;
margin-bottom:30px;
}
.text{
font-size: 0,6em;
margin-left: 5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
padding-top:20px;
color:white !important;
}
.center{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
background-image: url("img/bg.jpg");
background-color: #793985;
background-repeat: no-repeat;
background-size: cover;
}
.slogan h1 {
font-size: 3vw;
color:white;
padding-right:10px;
padding-left:10px;
letter-spacing:-0.6pt;
line-height:/*44pt*/ 2,7vw; }
.separator {
background-color: rgba(154, 207, 141, 0.1);
background: rgba(154, 207, 141, 0.1);
}
/*.separator h1, h2, h3 {
color:white !important; */
}
.separator h2 {
font-size:1,5vw;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
img {
max-width:100%;
}
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top:10px;
}
.qr, .logo {
padding-right:10px;
padding left:10px;
min-width:45px;
}
.logo {
max-width:80px;
min-width:45px;
}
.link {
letter-spacing:10pt;
font-size:16px !important;
padding-top:15px;
padding-bottom:15px;
}
.koperta li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="emailer-background">
<div class="emial-container">
<div class="content">
<div class="separator">
<img src="img/heder.jpg" alt="header image">
<div class="text"><b>usługi fotograficzne</b>: wywoływanie fotografii z każdego typu nośnika i klisz, renowacja,
retusz zdjęć, fotografia okolicznosciowa, sesje fotograficzne studyjne i plenerowe, fotografia
reklamowa i katalogowa, akcesoria foto, <br>ramki, albumy, kubki, koszulki, poduszki z Twoim projektem</p>
<p><b>usługi poligraficzne:</b> ksero, bindowanie, drukowanie, skanowanie. </div>
</div><!--separator end-->
<div class="slogan">
<h1>Zamrażanie chwil
<br>i malowanie światłem <br>
to sztuka ! </h1>
</div>
<div class="slogan2">
<div class="separator">
<h2>Chcesz zobaczyć jak to działa?<br>
Przyjdź, przyjmiemy Cię z radością ! </h2>
</div>
</div><!--slogan 2 end-->
<div class="flexcontainer">
<div class="qr">
<img src="img/qr.svg">
</div>
<div class="logo">
<img src="img/logo.svg">
</div>
<div class="qr">
</div>
<div>
<ul class="fa-ul">
<li class="koperta"> Email: <br>zorza.studio#gmail.com</li>
<li>Tel. <b>697 625 645</b></li>
</ul>
</div>
</div><!--- felx end-->
<div class="separator">
<h2 class="link">facebook.com/zorza.studio</h2>
</div>
</div><!--content end-->
</div><!--container end-->
</div><!--background end-->
</html>
After (tables)
https://jsbin.com/muzokadutu/edit?html,output
text-align:left/rignt/center !important ;
try this.
Remove text-align: center; in .emial-container.
I have problem : my picture doesn't want to center despite I used text-aligne:center;, display:block; and margin: 0 auto;
Here is a picture
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
max-width: 1000px;
margin: 0 auto;
}
#Logo {
text-align: center;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>str</title>
<meta name="description" content=" bbbbbbb" />
<meta name="keywords" content="bablal" />
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" />
<link rel="stylesheet" href="new.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400&subset=latin-ext" rel="stylesheet">
</head>
<body background="photo/ik.png">
<div id="container">
<div id="Logo">
<img src="photo/lg.png" width="800" height="533.5">
</div>
</div>
</body>
</html>
One way to do it using Flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-attachment: fixed;
background-size: 100%;
}
#container {
background: yellow;
height: 100vh;
width: 100vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="Logo">
<img src="http://placehold.it/200x100/333333">
</div>
</div>
change #container {max-width:1000px to width:100%}
Set the margin property of the image itself to auto on the left and right.
HTML part
<body>
<div id="container">
<div id="Logo">
<img class="centeredimage" src="photo/lg.png" width="80" height="50">
</div>
</div>
</body>
CSS part
img.centeredimage{
display: block;
margin-left: auto;
margin-right: auto;
}
Fiddle:
https://jsfiddle.net/ja0zhnsd/
Try This:
.Image{
background:#ccc;
padding:30px;
}
.img-responsive{
display: block;
height: auto;
max-width: 100%;
margin:0 auto;
}
<div class="Image">
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
#container {
width: 100%;
}
#Logo img {
text-align: center;
margin: 0 auto;
}
Does this work?
use this code this will done your job. cheers!
<p style="text-align:center;">
<img src="yourimage.png" alt="Dev N Technologies" width=600 height=200 >
I am having following code for my master page.
The problem is with FOOTER tag.
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MASTER_MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<script src="../JS/jq.js" type="text/javascript"></script>
<script src="../JS/jqui.js" type="text/javascript"></script>
<script src="../JS/script.js" type="text/javascript"></script>
<style type="text/css">
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bigDiv
{
margin: auto;
width: 1000px;
height: 1000px;
background-color: rgba(255,255,255,0.5);
}
header
{
height: 100px;
background-color: white;
font-family: "Source sans pro";
}
#menu a
{
text-decoration: none;
color: white;
}
.menuItem
{
width: 20%;
float: left;
background-color: gray;
height: 50px;
font: normal 18px 'Fjalla One',sans-serif;
color: white;
padding-top: 30px;
text-align: center;
cursor: pointer;
}
#contentMain
{
float: left;
width: 80%;
background-color: rgba(255,255,255,0);
height: 100%;
overflow-y: scroll;
}
#content
{
height: 800px;
background-color: rgba(255,255,255,0);
font-family: "Source sans pro";
}
#contentAd
{
float: left;
width: 20%;
background-color: orange;
height: 100%;
}
footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
footer a, label
{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="bigDiv">
<header>
<h1>HR Softwares</h1>
<h4>Advanced softwares and coaching</h4>
</header>
<div id="menu">
<div class="menuItem">HOME</div>
<div class="menuItem">SERVICES</div>
<div class="menuItem">PRODUCTS</div>
<div class="menuItem">CONTACT US</div>
<div class="menuItem">NEWS</div>
</div>
<div id="content">
<div id="contentMain">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="contentAd">
s
</div>
</div>
<footer>
Contact us
<label>| </label>
Feedback
</footer>
</div>
</form>
</body>
</html>
Whenever I try to set the height of FOOTER, height of footer goes behind the CONTENT and CONTENTMAIN divs, I want it to appear below the CONTENT div, but its not working.
For testing purpose, I have set opacity of CONTENT and CONTENTMAIN to 0 so that You can see height of FOOTER behind that. I want FOOTER to appear as per the flow and below CONTENT div.
Update:
clear:both in footer solved my problem. Thanks all anyway
try this i hope this will help for u.
CSS
.footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
HTML
<div class="footer">
Contact us
<label>| </label>
Feedback
</div>
This is a follow up to this question. I've tried to come up with a solution that allowed me to have in-line labels in a multi-column form, by reading some of the answers provided in the question mentioned above I realized that it was much more simpler than I originally had though, this is my prototype:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
In theory this seems to work, but in practice all I get is this very weird result (in FF 3.5.6):
If I drop the p tags around the labels and input the result changes a bit:
What's wrong? Is there any hack I'm supposed to make use of?
How can I place the labels / inputs inside the box like they are supposed to?
I appreciate all input, thanks.
Try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
margin: 10px 0px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
padding: 10px;
-moz-border-radius: 6px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<p><label>Name:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
<div class="_20">
<p><label>Email:</label></p>
</div>
<div class="_30">
<p><input type="text" id="" /></p>
</div>
</div>
</div>
</body>
</html>
BTW, Check this out: How to create perfect form Markup and style it with CSS
Here's one. The main thing is the clear:both; div at the bottom, but there are a few more things changed too.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
width: 16%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
._30 {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
}
label {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
input {
border: 1px solid #B3B3B3;
font-family: inherit;
padding: 3px;
width: 100%;
}
.box {
padding: 10px;
background-color: #666;
}
.content {
background-color: #FFFFFF;
-moz-border-radius: 6px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="_20">
<label>Name:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div class="_20">
<label>Email:</label>
</div>
<div class="_30">
<input type="text" id="" />
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
first of all you need to reset the padding and margins on the <p> elements
p,label{
padding:0;
margin:0
}
secondly, you are floating elements inside a block element without clearing them later... hence the overflow issue... here is a working version of the code http://jsbin.com/eheva3
Note: I have used the clearit method which requires extra markup
You can use either that or the "clearfix" method... google for "clearfix" to find out more
You should start with the simplest possible implementation that works and build whatever fancy styling you want up from there. Getting rid of all the extraneous tags, all you really need is:
<div class="box">
<div class="content">
<label>Name:</label>
<input type="text" />
</div>
</div>
You don't need to add more divs and paragraphs to get it to snap to a grid, just style the elements that are already there.