I am trying to reproduce a layout similar to Youtube to practice some of the things I've learned just recently. How can I reposition an embedded Youtube video?
I tried making a parent div for the embedded video with display: relative, but it's not budging.
http://jsfiddle.net/GztRt/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title>
</head>
<body>
<div id="header"> <!-- Top header with logo, search bar, upload button-->
<a href="http://www.youtube.com" id="logo">
<div id="blue"> Blue</div>
<div id="tube">Tube</div>
</a>
<form style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get">
Search <input type="text" name="searchinput">
<input type="submit" value="Submit">
</form>
<a href"http://www.amazon.com" id="uploadparent">
<div id="upload">Upload</div>
</a>
</div>
<div id="videobox">
<object width="420" height="315">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ? hl=en_US&version=3"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true">
</embed></object>
</div>
<div id="column_box_right"></div> <!-- Related Videos spans the Right side! -->
<div id="column_box_left>ddddddddddddddddddddddd</div> <!-- column spans the left side! -->
<div id="vidinfo"></div>
<div id="footer"></div>
CSS:
html body {
width: 100%;
}
#header {
height: 35px;
background-color: grey;
margin-top: -6px;
position: relative;
margin-left: -7px
overflow: auto;
min-width: 1000px;
}
#blue {
height: 35px;
width: 60px;
background-color: grey;
border-radius: 4px;
text-align: center;
color: blue;
display: inline-block;
font-size: 20px;
font-family: Verdana;
}
#logo {
float: left;
margin-right: 14%;
}
#tube {
height: 35px;
width: 60px;
background-color: blue;
border-radius: 4px;
text-align: center;
display: inline-block;
color: white;
font-size: 20px;
font-family: Verdana;
}
#upload {
height: 30px;
width: 100px;
}
You had an extra space in your #videobox div. Changing it from #video box to #videobox allowed the div to position correctly in your jsfiddle. I'm not sure if this is your issue on your site, but since most copy and paste, I figured I'd throw it out there.
This will move your videobox div where ever you want on the screen. This will move it to the center.
#videobox {
display: block;
height: 100%;
left: 25%;
position: absolute;
top: 25%;
width: 100%;
}
Related
I'm trying to add the titles of this 2 image below them. But every time I try to add either h or p the text goes to do the right side instead to the bottom.
What am I doing wrong? Im just starting to learn html and I really like it but I'm stuck, and this is for my exam. Need help in this.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Comenzando la Fotografia</title>
</head>
<body>
<div class="contenido">
<div id="pagetitle">
<h1>Comenzando la Fotografia</h1>
<div id="navigation">
<ul id="nav_item">
<li>Inicio</li>
<li>Paisajes</li>
<li>Retratos</li>
</ul>
<div style="clear:both"></div>
</div>
</div>
<div>
<section id="central">
<img id="centralpic" style="align-content: center" src="img/paisajecentral.png" alt="imagencentral" title="paisaje1" width="730" height="413">
</section>
<article id="sidebyside">
<img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400">
<img id="rightpic" src="img/woman.jpg" alt="imagenizquierda" title="retrato1" width="736" height="1104">
</article>
</div>
<footer class="piedepagina">
<div id="footer1">
<section id="contact">
<h3>Contacto</h3>
<p>Correo: rdelarosa042019#gmail.com</p>
<p>Calle 3ra Avenida la Paz</p>
<p>Telefono: 220-0000</p>
</section>
<section id="terms">
<h3>Terminos</h3>
<p>Nos reservamos los derechos de autor y todo contenido es privado</p>
</section>
<section id="redes_sociales">
<h3>Redes Sociales</h3>
<a target="_blank" href="https://www.facebook.com"><img src="icon/facebook.png">Comenzando la Fotografia</a>
<a target="_blank" href="https://twitter.com/"><img src="icon/twitter.png">#comenzandolafotografia</a>
<a target="_blank" href="https://www.instagram.com/?hl=en"><img src="icon/instagram.png">#comenzandolafotografia</a>
</section>
<section id="rights">
<h3>Derechos</h3>
<p>Ruben De La Rosa</p>
<p>Copyrights©-2017</p>
</section>
</div>
</footer>
</div>
</body>
</html>
body{
background-color: #02010a;
color: white;
}
.contenido{
width: 900px;
margin: 0 auto;
text-align: center;
}
#pagetitle{
background-color: #5b7989;
width: 100%;
height: 100px;
margin-top: 0 auto;
display: block;
position: relative;
border-top-left-radius: 10px;
border-top-right-radius: 10xp;
}
h1{
float: left;
display: inline-block;
text-shadow: 2px 2px #02010a;
padding-left: 10px;
}
a{
text-decoration: none;
}
ul li a{
color: white;
}
#navigation{
float: right;
}
#nav_item{
list-style-type: none;
font-size: 100%;
padding: 10px 10px 10px 10px;
}
li{
display: inline;
}
#central{
background-color: #82c3a6;
width: 900px;
height: 450px;
display: block;
position: relative;
}
#centralpic{
align-content: center;
margin-top: 15px;
}
#sidebyside{
background-color: #d5c75f;
border-width: 1px;
display: flex;
height: 500px;
width: 900px;
overflow: hidden;
align-content: center;
}
#leftpic{
height: 300px;
width: auto;
position: relative;
margin: 60px auto;;
}
#rightpic{
height: 300px;
width: auto;
position: relative;
margin: 60px 70px auto;
align-content: center;
}
Wrap your <img> element to <figure> element and after <img> element add <figcaption> element. So your code will be something like this :
<figure>
<img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400">
<figcaption>Your text here</figcaption>
</figure>
Hope it help you out.
I am trying to align three images in a header div. I need one image on the left - once centered - and an image on the right. I have the image on the left and the centered image in place. However, I cannot get the image I need on the right to display on the right of the centered image. If I float:left the centered image it messes up my centered image in various browsers. The image I want on the right displays on the left of the centered image. How do I get it on the right side of the centered image? Thank you very much.
Here is my code:
HTML:
<div class="header">
<div class="headerLeft">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="logo85.jpg"
width="485"
height="93"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="salogo_lg.jpg"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div> <!-- closing tag of header -->
CSS:
.header{
width: 100%;
height: 115px;
background-color: #0B0B3B;
margin-bottom: -15px;
}
.headerLeft{
float: left;
width: 105px;
height: 115px;
}
.headerCenter{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 485px;
height: 93px;
}
.headerRight{
float: left;
text-align: right;
margin-left: 15px;
width: 105px;
height: 115px;
}
Quick answer :
*
{
box-sizing: border-box;
}
header
{
background: grey;
color: white;
padding: 1em;
position: relative;
height: 5em;
width: 100;
}
img
{
display: block;
height: 3em;
margin: auto;
}
img.right
{
position: absolute;
right: 1em;
top: 1em;
}
img.left
{
left: 1em;
position: absolute;
top: 1em;
}
<header>
<img src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" class="left" />
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRBzTbPH8FRYR0HRqTmXnwSO4GgLbFO6rpALpwynKRr4SM_nTCywQQO6qvDcg" alt="" class="center" />
<img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt="" class="right" />
</header>
To avoid using position: absolute;, I'd recommend using calc to help out, and wrapping the .headerCenter in .headerCenterWrapper as I have below.
CSS:
.headerLeft {
width: 105px;
height: 115px;
display: inline-block;
}
.headerCenterWrapper {
width: calc(100% - 220px); /* Using a number slightly more than the sum of the side images' widths (210 px) to be safe */
height: 115px;
display: inline-block;
text-align: center;
}
.headerCenter {
width: 50px;
height: 115px;
display: inline-block;
}
.headerRight {
width: 105px;
height: 115px;
display: inline-block;
}
And the HTML:
<header class="header">
<img src="" alt="" class="headerLeft"/>
<div class="headerCenterWrapper">
<img src="" alt="" class="headerCenter" />
</div>
<img src="" alt="" class="headerRight" />
</header>
css
.headerLeft{
float: left;
width: 33.33%;
height: 115px;
}
.headerCenter{
margin-left: auto;
margin-right: auto;
width: 33.33%;
height: 115px;
float:left;
text-align:center;
}
.headerRight{
float: right;
width: 33.33%;
height: 115px;
text-align:right;
}
html
<div class="header">
<div class="headerLeft">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerLeft-->
<div class="headerCenter">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army" />
</div> <!-- closing tag of headerCenter -->
<div class="headerRight">
<img src="manish.png"
width="105"
height="115"
alt="Salvation Army Logo" />
</div> <!-- closing tag of headerRight -->
</div>
I have an app that switches between stylesheets when the user rotates their tablet. There is a container div which holds everything. Inside the container div there is 2 divs. The one div holds the math problem and the other div holds a chalkboard.
In landscape mode the math problem and chalkboard are next to each. THIS WORKS RIGHT.
Example: ([Math Problem] [Chalkboard]) --- Side-by-side
In portrait mode the math problem should be above the chalkboard. RIGHT NOW, their just stacked on top of one another.
Example: ([Math Problem]
[Chalkboard]) --- Chalkboard sits below math problem
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>quiz</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="quiz.css" rel="stylesheet" />
<script src="quiz.js"></script>
</head>
<body>
<div class="container">
<div class="mathSide">
<!-- QUIZ STATS -->
<div id="quizStats">
<p class="alignLeft" id="statQuestionDiv"></p>
<p class="alignCenter" id="statTimerDiv"></p>
<p class="alignRight" id="statScoreDiv"></p>
</div>
<div style="clear: both;"></div>
<!-- QUIZ STATS -->
<!-- MATH EQUATION -->
<div class="mathEquation">
<div class="line1Num" id="line1NumDiv"></div>
<div class="line2">
<div class="line2Ope" id="line2OpeDiv"></div>
<div class="line2Num" id="line2NumDiv"></div>
</div>
<div class="line">
<div class="result"></div>
</div>
</div>
<!-- MATH EQUATION -->
<!-- ANSWERS -->
<!-- Multiple choice -->
<div class="center">
<div id="multipleChoiceDiv">
<button class="multipleChoice" id="btnChoice1"></button><br />
<button class="multipleChoice" id="btnChoice2"></button><br />
<button class="multipleChoice" id="btnChoice3"></button><br />
<button class="multipleChoice" id="btnChoice4"></button>
</div>
</div>
<!-- Multiple choice -->
<!-- Fill in the blank -->
<div class="center">
<div id="fillBlankDiv">
<input class="textBox2" id="userAnswer" type="text" />
<button class="fillBlank" id="btn7">7</button>
<button class="fillBlank" id="btn8">8</button>
<button class="fillBlank" id="btn9">9</button><br />
<button class="fillBlank" id="btn4">4</button>
<button class="fillBlank" id="btn5">5</button>
<button class="fillBlank" id="btn6">6</button><br />
<button class="fillBlank" id="btn1">1</button>
<button class="fillBlank" id="btn2">2</button>
<button class="fillBlank" id="btn3">3</button><br />
<button class="fillBlank" id="btn0">0</button>
<button class="fillBlank" id="btnNeg">+/-</button>
<button class="fillBlank" id="btnOk">OK</button>
</div>
</div>
<!-- Fill in the blank -->
<!-- ANSWERS -->
<!-- (IN)CORRECT -->
<div class="center2">
<div id="checkDiv"></div>
</div>
<!-- (IN)CORRECT -->
</div>
<!-- CANVAS -->
<div class="canvasSide">
<canvas id="can1" width="500" height="600" style="border:2px solid #fff; background-color: #026236;"></canvas>
</div>
<!-- CANVAS -->
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abErase', label:'Erase', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abPause', label:'Pause', icon:''}" type="button"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'abHome', label:'Home', icon:''}" type="button"></button>
</div>
</body>
</html>
My CSS:
body {
background-color: #00522c;
}
.container {
width: 820px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center ;
}
.mathSide {
width: 300px;
float: left;
}
.canvasSide {
width: 500px;
float: left;
margin-left: 20px;
}
/* QUIZ STATS */
.alignLeft {
float: left;
width: 33%;
text-align: left;
font-size: 125%;
font-weight: bold;
}
.alignCenter {
float: left;
width: 33%;
text-align: center;
font-size: 125%;
font-weight: bold;
}
.alignRight {
float: left;
width: 33%;
text-align: right;
font-size: 125%;
font-weight: bold;
}
/* QUIZ STATS */
/* MATH EQUATION */
.mathEquation {
width: 300px;
}
.line1Num, .line2 {
width: 100%;
text-align: right;
display: table;
font-size: 400%;
}
.line1Num {
float: right;
font-size: 400%;
}
.line2Ope {
width: auto;
float: left;
}
.line2Num {
width: auto;
float: right;
}
.line {
width: 100%;
text-align: right;
border-top: 4px solid black;
border-color: white;
}
/* MATH EQUATION */
/* ANSWERS */
.multipleChoice {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
}
.multipleChoiceRed {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: red;
}
.multipleChoiceGreen {
width: 300px;
padding-top: 15px;
padding-bottom: 15px;
margin-top: 20px;
font-size: 150%;
background-color: green;
}
.textBox {
}
.fillBlank {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 10px;
font-size: 150%;
}
/* ANSWERS */
/* (IN)CORRECT */
.center2 {
text-align: center ;
font-size: 300%;
}
/* (IN)CORRECT */
.textBox2[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: #026236;
}
.textBox2A[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: red;
}
.textBox2B[type="text"]
{
font-size: 200%;
text-align: right;
color: #fff;
background-color: green;
}
#media screen and (-ms-view-state: snapped) {
}
#media screen and (-ms-view-state: fullscreen-portrait) {
.mathSide {
width: 300px;
position: absolute;
}
.canvasSide {
width: 500px;
position: absolute;
}
}
I have a text-rollover where an address-block appears on rollover. The address-block itself has two independent rollover links.
Here it is (I isolated the relevant top menu for simplification reasons). Please roll over the "contact" menu to see what I mean:
here's the example page
The email link works fine but I can't figure out how to make the phone link independent from the email link so that if you rollover the email link it leeds you to your email browser and if you rollover the phone line it dials the respective phone number (with href="tel:917-650...." etc.). If I have both links within their respective paragraph tags the contact rollover doesn't work anymore. Looks like the link tag needs to be wrapped around the address-block for the contact-rollover work, and nested links won't be the solution either. How can I resolve that?
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
<script type="text/javascript" src="js/raphaelzwyerFive.js"></script>
</head>
<body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
<div id="container">
<div id="topmenu">
<ul id="menulist">
<li class="menubuttonactive">portfolio</li>
<li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
<li class="menubuttons">about</li>
<li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
<li class="menubuttons">resume</li>
<li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
<li id="contactrollover">
<div class="menubuttons">
<a href="mailto:info#raphaelzwyer.com" target="_new">contact
<span id="addressbox">
<p id="email">info#raphaelzwyer.com</p>
<p id="phone">917-650-9534</p>
<p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
</span>
</a>
</div> <!-- end of menubuttons -->
</li> <!-- end of contactrollover -->
</ul> <!-- end of menulist -->
</div> <!-- end of topmenu -->
</div> <!-- end of header -->
</body>
</html>
The relevant CSS:
.menubuttons {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttons:hover {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg_h.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttonactive {
position :relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg_a.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttonactive a {
color: #be1f2d;}
.buttonspaces {
height: 36px;
list-style: none;
float: left;}
#contactrollover {
position: relative;
top: 0px;
margin-bottom: -36px;
width: 100px;
left: 0px;
float: left;}
#contactrollover div {
width: 100px;
height: 50px;
float: left;}
#contactrollover a span {
display: none;}
#contactrollover a {
display: block;}
#contactrollover a:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;
padding-right: 12px;}
#addressbox {
position: absolute;
top: 0px;
width: 548px;
left: 212px;
height: 60px;
background-image: url("../images/menubg.png");
background-repeat: repeat-x;
padding-top: 10px;
letter-spacing: 0.062em;
text-align: right;
float: left;
z-index: 800;
color: #a9a9a9;
background-color: white;}
#addressbox:hover {
float: left;
z-index: 900;}
#phone:hover, #email:hover {
color: #be1f2d;}
#address {
position: relative;
width: 548px;;
height: 22px;
float: left;
z-index: 900;
color: #a9a9a9;}
You're wrapping everything in your email link. Try this instead - DEMO
HTML
<li id="contactrollover">
<div class="menubuttons">
contact
<span id="addressbox">
<p id="email">info#raphaelzwyer.com</p>
<p id="phone">917-650-9534</p>
<p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
</span>
</div> <!-- end of menubuttons -->
</li> <!-- end of contactrollover -->
CSS
#contactrollover a+span {
display: none;
}
#contactrollover a {
display: block;
}
#contactrollover a:hover+span,
#contactrollover span:hover {
display: block;
position: absolute;
top: 0px;
left: -560px;
padding-right: 12px;
}
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.