Crikit Posted November 29, 2013 Share Posted November 29, 2013 I recently finished the course on codecademy.com and have gotten pretty far on my home page> I would like to know how to position my content div in between the right and left divs. [CSS] --------- * { font-family: Verdana; } div { border-radius: 5px; } body { background: url("http://bit.ly/1aYf0V3"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment:fixed; } #header { height: 50px; background-color: black; margin-bottom: 10px; } #footer { height: 50px; background-color: #69D2E7; /*Add your CSS here!*/ clear:both; } #copyright { padding-top:10px; text-align:center; } ul { list-style-type:none; overflow:hidden; margin-left:25%; padding-top:10px; display:block; } a:link,a:visited { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#66CCFF; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color:#000066; } li { float:left; } .left { height: 250px; width: 80px; background-color: black; float: left; margin-bottom: 10px; border:radius:20px; } .right { height: 250px; width: 270px; background-color: black; float: right; margin-bottom: 10px; border-radius:20px; } #footer { height: 50px; background-color: #69D2E7; /*Add your CSS here!*/ clear:both; } #content { float:left; border:2px solid white; } #copyright { padding-top:10px; text-align:center; } #facebookbutton { width: 73px; height: 73px; border: 2px solid black; border-radius:15px; background-color: #99CCFF; margin:auto; margin-top:5px; } #youtube { width:73px; height:73px; border:2px solid black; border-radius:15px; background-color:#990000; margin:auto; margin-top:5px; } #twitter { width:73px; height:73px; border:2px solid black; border-radius:15px; background-color:white; margin:auto; margin-top:5px; } input[type=submit] { margin-left:100px; border:0; background-color: #66CCFF; margin-top:30px; padding:0; width:70px; height:30px; font-family:Verdana; } #messagebox { display:block; width:100%; margin-top:20px; } body { background: url("http://bit.ly/1aYf0V3"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment:fixed; } [/color][color=#008000;]---------[/color][color=#008000;]<!DOCTYPE html>[/color][color=#008000;]<html>[/color][color=#008000;]<head>[/color][color=#008000;]<link type="text/css" rel="stylesheet" href="main.css"/>[/color][color=#008000;]<title>Result</title>[/color][color=#008000;]</head>[/color][color=#008000;]<body>[/color][color=#008000;]<div id="header">[/color][color=#008000;]<ul>[/color][color=#008000;] <li><a href="#home">Home</a></li>[/color][color=#008000;] [/color]<li><a href="#news">News</a></li> [color=#008000;] <li><a href="#contact">Contact</a></li>[/color][color=#008000;] <li><a href="#about">About</a></li>[/color][color=#008000;] </ul>[/color][color=#008000;]</div>[/color][color=#008000;]<div class="left">[/color][color=#008000;]<div ID="youtube">[/color][color=#008000;]<img src="yt.png">[/color][color=#008000;]</div>[/color][color=#008000;]<div ID="facebookbutton">[/color][color=#008000;]<img src="like.png">[/color][color=#008000;]</div>[/color][color=#008000;]<div ID="twitter">[/color][color=#008000;]<img src="twitter.png">[/color][color=#008000;]</div>[/color][color=#008000;]</div>[/color][color=#008000;]<div class="right">[/color][color=#008000;]<div>[/color][color=#008000;]<input type="email"[/color][color=#008000;]placeholder="Your email">[/color][color=#008000;]</div>[/color][color=#008000;]<div ID="messagebox">[/color][color=#008000;]<textarea name="Message" ROWS=7 COLS=30 ></textarea>[/color][color=#008000;] <input type="submit">[/color][color=#008000;]</div>[/color][color=#008000;]</div>[/color][color=#008000;]<div id="footer">[/color][color=#008000;]<p ID="copyright">Copyright CrikitPlays 2013 </p>[/color] [color=#008000;]</div>[/color][color=#008000;]<div ID="content">[/color][color=#008000;]<h1>Hello World</h1>[/color][color=#008000;]</div>[/color] [color=#008000;]</body>[/color][color=#008000;]</html>[/color] Link to comment Share on other sites More sharing options...
davej Posted November 29, 2013 Share Posted November 29, 2013 (edited) You provide an image of how it is, but you need to also provide an image of what you want. Edited November 29, 2013 by davej Link to comment Share on other sites More sharing options...
RezaRohani Posted December 4, 2013 Share Posted December 4, 2013 try this for #content in CSS and in HTML, place the "content" div before footer: #content { border: 2px solid white; margin-left: 85px; margin-right: 275px; } Link to comment Share on other sites More sharing options...
davej Posted December 5, 2013 Share Posted December 5, 2013 Oh! There is a div with an id of content? I thought he was speaking generically when he said "content". #content { float:left; border: 2px solid white; margin: 75px 0 0 10%; width:300px; /*margin-right: 275px;*/ text-align:center;} But the content div needs to move up... <div ID="content"> <h1>Hello World</h1></div><div class="right">[etc...] ...and the overall envelope div needs a minimum width assigned. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now