I want to align these two images on the right but I want them to be on separate lines. Right now the only method I can think to do that is a very large margin for one of the images but i'm wondering if there's a better way.
I want the paragraphs to appear beside the first image, on the right.
Also the background of the paragraphs changes when scrolled over, but I would like to restrict the colour change to being just around the text.
Use any images you want in this code
This is my code:
<!DOCTYPE HTML>
<html>
<head>
<title> Stack Overflow Question </title>
<link rel="stylesheet" type="text/css" href="./css/q7.css"></link>
</head>
<body>
<h1> Holla lolla lolla la </h1>
<figure id=real>
<img src="images/RealDog.jpg" </img>
<figcaption>Figure 1. Real Dog</figcaption>
</figure>
<p id="Gar"> Gar Gar Gar </p>
<p id="lol"> lol lol lol </p>
<figure id=fake>
<img src="images/FakeDog.jpg"></img>
<figcaption>Figure 2. Fake Dog</figcaption>
</figure>
</body>
</html>
Css file:
body {
font-family: sans-serif;
font-weight: normal;
background-color: #EDEDED;
}
h1 {
color: blue;
font-weight: normal;
}
img {
height: 100px;
/*display: block;*/
}
p:hover {
background-color:white;
}
#Gar {
float: right;
color: blue;
margin-right: 100px;
}
#lol {
float: right;
color: blue;
margin-right: 100px;
}
figure {
float: right;
margin-left: 1000px;
}
First of all it's very important to understand the way that html and css works.You should be more specific with your classes and improve your structure in html code.For css it's wrong to use margin:1000px.It's wrong!I set max-width but you can change it.I tried to correct your code as much as I can...but there are a lot better ways to fix your problem
html code:
<div class = "container">
<h1> Holla lolla lolla la </h1>
<div class="right-part">
<figure id=real>
<img src="images/RealDog.jpg" </img>
<figcaption>Figure 1. Real Dog</figcaption>
</figure>
<div class="two-p">
<p id="Gar"> Gar Gar Gar </p>
<p id="lol"> lol lol lol </p>
</div>
<figure id=fake>
<img src="images/FakeDog.jpg"></img>
<figcaption>Figure 2. Fake Dog</figcaption>
</figure>
</div>
css code
body {
font-family: sans-serif;
font-weight: normal;
background-color: #EDEDED;
}
.container{
position:relative;
max-width:900px;
margin:0 auto;
}
h1 {
color: blue;
font-weight: normal;
display: inline-block;
vertical-align: top;
}
.right-part {
display: inline-block;
}
p:hover {
background-color:white;
}
#Gar {
color: blue;
}
#lol {
color: blue;
}
.two-p {
display: inline-block;
vertical-align: top;
}
figure#real {
display: inline-block;
}
Related
How do I create the horizontal collage and with the same space in between pictures (shown in the picture below) using html5 and css3?
I am very new into both StackOverflow, HTML5 and CSS3 so I do apologize if this post is a bit messy. And I hope you can help my anyway.
This is how i want the final design to look.
Here is my code so far:
h1 {
font-family: 'Brother 1816 Bold', Arial, Helvetica, sans-serif;;
font-size: 2rem;
font-weight: bold;
color: #a71b1a;
}
h2 {
font-family: 'Brother 1816 Bold Italic', Arial, Helvetica,
sans-serif;;
font-size: 1.5rem;
font-weight: bold;
color: #000;
}
.collage_index_1 {
align-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.typekit.net/tck7grc.css">
<title>Freya Photos - Index</title>
</head>
<body>
<main>
<header>
<!-- all the code related to the header here -->
</header>
<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<!-- I cannot align these three images here: -->
<div class="collage_index_group">
<div class="collage_index_1">
<img src="img/optimized images/adorable-20374_1920_250x250.png" alt="Image in black and white of a very young child laying on his stomach underneath a white towel.">
</div>
<div class="collage_index_2">
<img src="img/optimized images/bride-1867228_1920._250x250png.png" alt="A summer picture of a woman and a man standing amongst very high reed and kissing eachother passionately">
</div>
<div class="collage_index_3">
<img src="img/optimized images/smile-2072908_1920_250x250.png" alt="A portrait of a young woman holding an apple in her right hand, close to the face while looking straight into the camera, with a little smile">
</div>
</div>
<footer>
<!-- all the code related to the footer here -->
</footer>
</main>
</body>
</html>`
You probably want to have a look at display: flex link
Here is an example.
/* the flex container */
.collage_index_group {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
/* the flex items */
.collage_index {
width: 50px;
height: 30px;
background-color: #f1f1f1;
margin: 10px;
padding: auto;
font-size: 30px;
}
<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<div class="collage_index_group">
<div class="collage_index">
<img src="img/optimized images/adorable-20374_1920_250x250.png">
</div>
<div class="collage_index">
<img src="img/optimized images/bride-1867228_1920._250x250png.png">
</div>
<div class="collage_index">
<img src="img/optimized images/smile-2072908_1920_250x250.png">
</div>
</div>
Thanks for sharing the code, please do not forget to share the css. If you could make a snipplet with it it would be perfect ;)
I will now try to adjust my snipplet accordingly.
Edit
I mistakenly wrote something about h1-h6, but found out I was wrong after double checking.
Im not sure that what you mean
/* HORIZONTAL SCROLL */
.scroll-container{
overflow: auto;
white-space: nowrap;
padding: 5px 70px 5px 20px;
background: transparent;
height: 100%;
border-radius:15px;
}
.scroll{
display:inline-block;
}
.scroll img {
margin-right:22px;
width:250px;
height:100px;
width:33%;
}
<div style="text-align:center; font-style:italic;">Scroll to left</div>
<div class="scroll-container">
<div class="scroll">
<!-- PLACE YOUR IMG URL HERE -->
<img src="https://media.istockphoto.com/photos/programmer-working-with-program-code-picture-id1075599562?k=20&m=1075599562&s=612x612&w=0&h=cDFY2kKyhFzSNNlDQsaxoekIW0v7iyaMBkxp11Fz33U="/>
<img src="https://www.careergirls.org/wp-content/uploads/2015/06/Computer_Programmer1920X10180.jpg"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
</div>
</div>
I've been doing HTML and CSS for a few months and as a part of my website I made a joke fake sales website. I am sort of basing it on the Amazon pages, with a picture on the left, a header on the right, and a product description on the right underneath the heading. Now yes I know what you're thinking looking at my code "He hasn't even done anything to his description!", well there's nothing there because I got angry and got rid of my CSS for the description. You can see a class .description for putting CSS and whatever there. I've tried floating it to the right (it doesn't work), floating to the right and then using padding to push it in a certain direction (it doesn't work), E.T.C. If you want the full code I'll put that at the bottom or something. Please show me how I can get my description under the title?
(For this chunk of code I have removed a few bits that were unnecessary)
<!DOCTYPE html>
<html>
<head>
<title>merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.description{
}
</style>
</head>
<body>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
The output of the code
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.description{
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
Use div to order and group your code. Try to think of the elements on your page as different groups in a box, and create a div for every group.
To make the div with the text appear right next to the image, make the image float: left.
` <!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#img {
float: left;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<div id="img">
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
</div>
<div>
<h1>
Hamsterlover606 merchandise for sale
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</div>
</body>
</html>`
i am new here and generally i recently started to learn webdev and i am trying to make little "portfolio" website to train practice skills. I have one problem what i can't solve, and i am siting with eyes on screen about few hourse what makes me so confused
First issue is whitespace on right side of the page.
2.Next issue is a lot of whitespace what remaining after relative positioning.
How can with these get rid of these things?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<!--header-->
<header>
</header>
<div class = "container">
<div class="text">
<h1 id = "h1">“The life of a designer...” </h1>
<h2 id = "h2">Is a life of fight. Fight against the ugliness.
Just like a doctor fights against disease. For us,
the visual disease is what we have around, and what we
try to do is cure it somehow with design.</h2>
<h3>– Massimo Vignelli. </h3></div></div>
<div class="txt">
<p id ="one">Hi, i am webdeveloper<id></id></p>
<p id ="two">If you want work with me</p>
<p id ="three">leave a message.</p>
</div>
<div class = "icons">
<img src = "icons/cheap.png" alt = "cheap" id="cheap"/>
<img src = "icons/Trust.png" alt = "trust" id="trust"/>
<img src = "icons/timeliness.png" alt = "timeliness" id="timeliness"/>
<img src ="icons/developing.png" alt ="developing" id="developing"/>
</div>
<div class = "Social">
<img src ="icons/facebook.png" alt ="fb" />
<img src ="icons/instagram.png" alt ="insta" />
<img src ="icons/linkedin.png" alt = "linkedin"/>
</div>
<!--Overview-->
<section>
<article>
Aaaa
</article>
</section>
<!-- Social media icons-->
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: myFirstFont;
src: url(/fonts/Graviola_Regular.otf);
}
#font-face {
font-family: czcionka;
src: url(/fonts/czcionka.ttf);
}
body {
margin:0px;
padding:0px;
}
header{
background-image:url(bg1.jpg);
background-repeat:no-repeat;
height:800px;
opacity: 0.8;
background-size:100% 100%;
}
.txt {
position:relative;
right:-50px;
top:-1120px;
border-left:3px solid white;
font-family:czcionka;
}
.txt #one {
position:relative;
color:white;
font-size: 50px;
position:relative;
bottom:-60px
}
.txt #two {
position:relative;
color: white;
font-size: 50px;
}
.txt #three {
position:relative;
color: white;
font-size: 50px;
top:-60px
}
.container .text {
color:white;
text-align: center;
position:relative;
top: -450px;
margin: 50px;
font-family: myFirstFont;
}
.container .text #h1 {
font-size:60px;
border-bottom: 3px solid;
font-family:myFirstFont;
}
.container .text #h2 {
font-size: 25px;
font-style:italic;
}
.container .text #another {
position: relative;
top:-500px;
font-family:myFirstFont;
font-size:40px;
}
.Social {
position: relative;
top:-1460px;
right:-50px;
margin:500px;
}
.icons #cheap {
position: relative;
top:-1139px;
right:-1225px
}
.icons #timeliness {
position:relative;
top:-1140px;
right: -1110px
}
.icons #developing {
position:relative;
top:-1140px;
right:-750px;
}
Here's link to img how this looks. When i scroll down page rest of my site elements are very far down.
Like this looks the white space what i talking about
I created a website last night that works in Chrome, Firefox, Safari and Opera, but it isn't working in Internet Explorer
I tried creating conditional styling and html5.shiv in the head tags. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Flat Design</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="css/hover.css" rel="stylesheet" media="all">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js" type="text/javascript"></script>
<script src="PIE.js" type="text/javascript"></script>
<style type="text/css">
.wrap {
width: 980px;
}
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
margin: 0;
}
.secondary {
width: 36.170212765957%;
height: 900px;
margin-left: 15px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<header class="main-header">
<a class="logo" href="#"><h2>My Experience in Web Development</h2> </a>
<nav class="main-nav">
<a link href="#" class="hover">Home</a>
<a link href="#" class="hover">About</a>
<a link href="#" class="hover">Clients</a>
<a link href="#" class="hover">News</a>
<a link href="#" class="hover">Contact</a>
</nav>
</header>
<div class="content">
<div class="main col">
<h3>My candid experience in trying to find a job as a Web Developer</h3>
<p>It hasn't been a dull moment ever since I decided to switch careers to web development.</p>
<p>I've taken up the arduous task of putting together a portfolio of several pieces of my best work. At the same time, I brushed up on my skillset by taking online courses at Team Treehouse and several YouTube tutorials, as well as utilized sites such as Stack Overflow, SitePoint, Six Revisions, etc.</p>
</div>
<div class="secondary col">
<h3>Hitting the pavement for a job in web development.</h3>
<p>In December of 2012, I decided to put my resume online to see what the job market was like in web development.</p>
<p>A month later,I landed an assignment at Web 4 Purpose as a jr. front end web developer.I handled all of the CSS,HTML,Javascript coding from wireframes done in Adobe Photoshop or drawn.<br></p>
</div>
<div class="extra col">
<h3>There's several web technologies.</h3>
<p>Here's a short list of the several web technologies out there:</p>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>JQuery</li>
<li>Bootstrap </li>
<li>Foundation</li>
<li>Angular.js </li>
</ol>
<br>
</div>
</div>
<footer class="main-footer">
<img src="img/twitter.png" alt="Twitter" class="social-icon">
<img src="img/facebook.png" alt="Facebook" class="social-icon">
<img src="img/linkedin.png" alt="LinkedIn" class="social-icon">
<img src="img/youtube.png" alt="YouTube" class="social-icon">
<img src="img/googleplus.png" alt="Google Plus" class="social-icon">
<p>© 2014 michaellegemah.com</p>
</footer>
</div>
</body>
</html>
The CSS sheet is this:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 25px;
background: #ECF0F1;
color: #FFF;
font: 1.3em/1.6 sans-serif;
}
.wrap {
margin: auto;
width: 90%;
}
.main-header {
background: #2C3E50;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.logo,
.main-nav a {
display: inline-block;
color: #FFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.main-nav a {
padding: 0 .75em;
border-right: 1px dotted;
color: #FFF;
font-size: .7em;
line-height: 1rem;
}
.main-nav a:hover {
text-decoration: underline;
}
.main-nav a:last-child {
border-right: none;
}
.content,
.main-header {
overflow: hidden;
}
.col {
height: auto;
}
.main {
background: #3498DB;
font-family: 'Lato', sans-serif;
}
h3 {
font-weight: 900;
}
li a, a {
text-decoration: none;
color: #FFF;
font-weight: 900;
}
.secondary {
background: #2ECC71;
font-family: 'Lato', sans-serif;
}
.extra {
display: none;
background: #C0392B;
font-family: 'Lato', sans-serif;
}
.main-footer {
background: #95A5A6;
font-family: 'Lato', sans-serif;
}
.social-icon {
width: 40px;
height: 40px;
margin: 0 5px;
border: none;
}
.main-header,
.main-footer,
.col {
margin-bottom: 15px;
padding: 2.15%;
border-radius: 5px;
}
/* ==========================================================================
Media Queries
========================================================================== */
/* Phones to Tablets */
#media only screen and (min-width: 481px) {
.col {
float: left;
}
.main {
width: 65.957446808511%;
height: 900px;
}
.secondary {
width: 31.914893617021%;
height: 900px;
}
.secondary,
.extra {
margin-left: 2.127659574468%;
}
}
/* Tablets to Desktop */
#media only screen and (min-width: 769px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
}
.secondary {
height: 900px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
}
#media only screen and (min-width: 1024px) {
.wrap {
width: 980px;
}
}
Unfortunately, the result has been this: http://flatdesign.originexample.site90.com which looks fine in all browsers except IE
If anyone sees anything I might have overlooked, or if there's a better solution, please let me know thanks
Using the IE11 developer-tools emulator to mimick IE8, I'm seeing two main differences:
no rounded corners;
columns aren't floating side-by-side;
The border radius can't be fixed easily and doesn't really affect performance, so I hope you're okay with ignoring that.
The column floats are what's making it look really ugly, and thankfully that's easy to fix.
You're creating your columns with the following rule:
#media only screen and (min-width: 481px){
.col {
float: left;
}
}
The problem is the "only" keyword. That keyword is designed to prevent browsers that don't recognize media queries from applying that style. That includes IE8. It reads it as a media query for a media type named "only"; it doesn't recognize that type, so it doesn't apply the style. If you remove the keyword:
#media screen and (min-width: 481px){
.col {
float: left;
}
}
Then IE8 reads that as #media screen blah,blah,blah. It ignores the stuff it doesn't understand and applies the rule to all screens regardless of their width.
For IE8, that's probably okay, since nobody's using IE8 on a handheld device. And if their screen is too narrow, that's okay since it just means the floated elements will end up one after another, the way they are without the floats.
It's possible that the change will also affect some older handheld devices that don't recognize min-width type media queries, but again, floats are pretty flexible.
One more thing: even when I added in a float property to your columns, the third column wasn't fitting in a row with the others. Two possible culprits: either IE8 is automatically adding in padding or margins somewhere you're not expecting, or they are rounding lengths up to the next pixel and that's throwing off your addition. A little bit of playing around with those settings should get them all side-by-side. If you make your last column float right instead of left, you can get away with making the margins slightly smaller without ruining the rectangular lines of the design.
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.