<div id="leftcolumn"><h1>
Host League of the 2014 12 Year Old Provincial Tournament!</h1><img src="/sites/nlbaseball2/files/LLBCweb.jpg" align="left" height="119" width="158"><h2>More to be posted in the future.
<!---
<a href="http://www.nlbaseball.ca/sites/nlbaseball2/files/summer2013camps/2013SummerCampsNorthLangley.pdf">Registration form...</a>
--->
</h2>
</div>

<div id="leftcolumn"><h1>In Memory of Will Smith 1966 – 2013</h1><img src="/sites/nlbaseball2/uploads/quicklist/Picture_of_Will_%282%29.jpg" align="left" height="119" width="158"><h2>North Langley will be hosting an 8 year old tournament as a lasting tribute to Will Smith, a long time coach, friend and executive member of North Langley Little League.
Tragically, Will passed away of cancer on February 10th, 2013. This tournament is a celebration of all that Will embodied – competiveness, sportsmanship, teamwork and fair play. <p>[
<!---HTML coding goes until the final body and html tags>

08-17-2013, 07:28 PM

DrDOS

Well, first, both floating and absolute positioning work best when the elements are in a box of fixed proportions, so the width: 100%; won't cut it. For absolute positioning, the box has to have position:relative; and you need to account for all padding, margins and borders when doing the math. Neither work well when your content varies a lot.

08-17-2013, 08:01 PM

JeremySchubert

Thanks for the reply. Initially I had just the two columns. The top row was an after thought. Is what you're saying is that I'm mixing two types of formatting and I should start from scratch?

Also missing a ; and a } in the CSS
Your html is missing closing tags.
You have two <div id="leftcolumn"> and no <div id="rightcolumn">
When you add a border, margin, or padding you increase your width.

<div id="leftcolumn">
<h1>Host League of the 2014 12 Year Old Provincial Tournament!</h1>
<img src="/sites/nlbaseball2/files/LLBCweb.jpg" align="left" height="119" width="158">
<h2>More to be posted in the future.</h2>
</div>

<div id="rightcolumn">
<h1>In Memory of Will Smith <br />1966 – 2013</h1>
<img src="/sites/nlbaseball2/uploads/quicklist/Picture_of_Will_%282%29.jpg" align="left" height="119" width="158">
<h2>
North Langley will be hosting an 8 year old tournament as a lasting tribute to Will Smith,
a long time coach, friend and executive member of North Langley Little League.
Tragically, Will passed away of cancer on February 10th, 2013. This tournament is a celebration
of all that Will embodied – competiveness, sportsmanship, teamwork and fair play.
</h2>
</div>
</div>
</body>
</html>

What I added to the CSS is not indented.

08-18-2013, 07:55 PM

JeremySchubert

Thank you sunfighter. Goes to show how important editing and proofing is!
I will review and learn from all of your comments. The feedback is great.
In the meantime, I started from scratch after watching some tutorials from www.createthenet.com (great tutorial!)

I'm happy with my revised code (see below). Just need to turn my #iconnavbar div into a faux column and maybe play with the color schemes.

Code:

@charset "UTF-8";
/* CSS Document */

<style type="text/css">

/* Global */

* {
border:0px;
margin:0px;
padding:0px;
}

a {
/*display:block;*/

border-bottom:1px color:#FFF solid;
}

a:link, a:visited {
color:#foo;
text-decoration:none;
}

a:hover {
background-color:#FC6;
color:#000;
}

body {
background-color:#000
}

h1 {
color:#009
}
h2 {
color:#FFF;
}

#wrapper {

width:100%;
margin:0px auto;

}

#header {
/* a place to put links to social media sites */
background-color:#C00;
padding:20px;
}