Jump to content

Help with positioning my "content" area.


Crikit
 Share

Recommended Posts

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]

post-168739-0-21186600-1385687102_thumb.jpg

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...