Reputation: 21
HTML div tag position
Here's my code I want the form and the iframe section side by side.There should be no gap between.So I set left div tag's width to 30% and right div tag to 70% but its not working.There is gap in between form section and iframe section.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Form and iFrame</title>
</head>
<body>
<div style="float:left; width=30%; background:#f45942">
<form action="">
<fieldset >
<legend> Sample Form</legend>
<input type="text" /> <br /> <br />
<input type="text" placeholder="Name" /> <br /> <br />
<input type="email" placeholder="Email or Phone Number" /> <br /> <br />
<input type="password" placeholder="Password" /> <br /> <br />
<select name="day" id="">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">1</option>
</select>
<select name="month" id="">
<option value="0">Month</option>
<option value="1">January</option>
<option value="2">February</option>
</select>
<select name="year" id="">
<option value="0">Year</option>
<option value="1">1992</option>
<option value="2">1982</option>
</select> <br /> <br />
<input type="radio" id="m" name="gender"/> <label for="m"> Male</label>
<input type="radio" id="f" name="gender"/> <label for="f"> Female</label> <br /> <br />
<input type="submit" value="Sign Up" /> <br /> <br />
<textarea name="message" id="" cols="30" rows="10"></textarea> <br />
<input type="color" /> <br />
<input type="file" /> <br />
</fieldset>
</form>
</div>
<div style="float:right; width=70%; background:#f9e000">
<header>
<h1>Learn PSD TO HTML</h1>
</header>
<div>
<h3>Lesson 1</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/czIRtH1n2bQ?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W" frameborder="2" allowfullscreen></iframe>
<br />
<h3>Lesson 2</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/aikEy1m8z5g" frameborder="0" ></iframe>
<br />
<h3>Lesson 3</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jLQqTeWkXzs?rel=0" frameborder="0" ></iframe>
<br />
<h3>Lesson 4</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2ZVdUtbNDiw?rel=0&controls=0" frameborder="0" ></iframe>
<br />
<h3>Lesson 5</h3>
<iframe width="320" height="180" src="https://www.youtube.com/embed/CxQoY895iOE?rel=0&controls=0" frameborder="0" ></iframe>
</div>
</div>
</body>
</html>Upvotes: 0
Views: 774
Answers (3)
Reputation: 4480
change width=70%; in style attribute to width:70%; and check,Also width=30%; to width:30%;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Form and iFrame</title>
</head>
<body>
<div style="float:left; width:30%; background:#f45942">
<form action="">
<fieldset >
<legend> Sample Form</legend>
<input type="text" /> <br /> <br />
<input type="text" placeholder="Name" /> <br /> <br />
<input type="email" placeholder="Email or Phone Number" /> <br /> <br />
<input type="password" placeholder="Password" /> <br /> <br />
<select name="day" id="">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">1</option>
</select>
<select name="month" id="">
<option value="0">Month</option>
<option value="1">January</option>
<option value="2">February</option>
</select>
<select name="year" id="">
<option value="0">Year</option>
<option value="1">1992</option>
<option value="2">1982</option>
</select> <br /> <br />
<input type="radio" id="m" name="gender"/> <label for="m"> Male</label>
<input type="radio" id="f" name="gender"/> <label for="f"> Female</label> <br /> <br />
<input type="submit" value="Sign Up" /> <br /> <br />
<textarea name="message" id="" cols="30" rows="10"></textarea> <br />
<input type="color" /> <br />
<input type="file" /> <br />
</fieldset>
</form>
</div>
<div style="float:right; width:70%; background:#f9e000">
<header>
<h1>Learn PSD TO HTML</h1>
</header>
<div>
<h3>Lesson 1</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/czIRtH1n2bQ?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W" frameborder="2" allowfullscreen></iframe>
<br />
<h3>Lesson 2</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/aikEy1m8z5g" frameborder="0" ></iframe>
<br />
<h3>Lesson 3</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/jLQqTeWkXzs?rel=0" frameborder="0" ></iframe>
<br />
<h3>Lesson 4</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2ZVdUtbNDiw?rel=0&controls=0" frameborder="0" ></iframe>
<br />
<h3>Lesson 5</h3>
<iframe width="320" height="180" src="https://www.youtube.com/embed/CxQoY895iOE?rel=0&controls=0" frameborder="0" ></iframe>
</div>
</div>
</body>
</html>Upvotes: 1
Reputation: 8625
You have a typo on your widths in <div style="float:right; width=70%; background:#f9e000"> & <div style="float:left; width:30%; background:#f45942">
Correct would be width: 30%; & width: 70%;
So change to:
<div style="float:right; width:70%; background:#f9e000">
And:
<div style="float:left; width:30%; background:#f45942">
Upvotes: 1
Reputation: 542
Have you given a thought about using BootStrap css for stylling, simply use this to include it in your html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
now you can use now your page is divided into 12 cols, you can use
class="col-md-3"
on a div for which you want to give 25% of page width, this will save you a lot of time worrying about setting css properties , you can refer to http://getbootstrap.com/ for more details
Upvotes: 0