16 replies [Last post]
9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

So I'm fairly new to CSS, but I know that for the most part you should be able to get away with not using tables for page formating. There is some specific formating that I have not been able to achieve, I'm not sure if it is my limited knowledge of CSS or that a table is appropriate here. Rather than describe what I'm trying to do I will show you:

My code is failing me. I know that headings are block elements so if I want no return I am under the impression I have to specify display:inline. Once I do that, it seems I lose control of positioning. Is there some other way I'm unaware of, besides using tables? Any help would be greatly appreciated. Thanks!

<html>
<head>
<style type="text/css">
h2 {
	display:inline;
	border:1px solid #000;
     }
h3 {
	display:inline;
	border:1px solid #000;	
     }
h4 {
	border:1px solid #000;	
     }
</style>
</head>
 
<body>
<h2>H2 This is a heading</h2>
<h3>H3 Right of the heading</h3>
<h4>H4 Under the heading</h4>
<h2>Another Heading</h2>
<h3>This left edge and above H3 even?</h3>
<h4>Under the heading</h4>
</body>
 
</html>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Lawlz, lost your post for a moment...

Is there going to be text under each header? That makes a difference.

No, you are not limited to display: inline to prevent newlines. What happens when you set a block to inline is, it acts like inlines... like text. Inlines can't be given a height or a width (exception, and s can, but they're weird anyway) and they usually can't have vertical margins (exception, form inputs, selects, checkradios...). So yeah, you do lose a lot re positioning with inlines.

The other options you can use are display: inline-block, which has various issues in various browsers, and the float property, which is likely what you want.

Floats have their own rules. They are blocks, but instead of stretching out to 100% width like static blocks always do, they shrink-wrap to their content (and in some browsers may cause the individual words in the headers to wrap, and in others not to) so almost always give your floats a width. It can be in something flexible like an em or % if you're careful.
Floats will stack up alongside each other, from side to side so long as there is room for them to do so within the width of their container and when they run out of room, they drop down to a new line and wrap, just like text does.

They do not take up vertical space in their containers (unless the container is also a float, or is enclosing its floats, see below), unlike static blocks. They're more like a post-it note-- their bottoms are sticking "up" from the page, towards you, meaning their block containers collapse their height (let's say all these headers were inside one big box called #wrapper and all of the headers and things were floated and #wrapper had some background image... in modern browsers who follow the rules, you won't see #wrapper's bg image. #wrapper thinks it's empty because it can't see the bottoms of its floated children).
Inlines can see the floats just fine, though, and will flow around them.

I think you will need and want floats. You will need to read up on how they work and what they do, and then learn why IE does it wrong often : )

Enclosing floats will make their containers act "normal" and stretch down to meet them.
Everything you wanted to know about floats but were afraid to ask is actually not everything but it hits the biggies.
A little deeper, Clearing floats and IE's issues.

Also, this is dense but as Gary says, it's great bedtime reading, will put you to sleep right away with no side effects: http://www.w3.org/TR/CSS21/visuren.html#floats
though that whole page is valuable, if you can decipher the jargon : ) Remember that it is stating what user agents (like browsers) SHOULD be doing... this doesn't mean they all actually DO it (bugz).

Floats were never meant for this stuff, just as tables weren't meant for this stuff, but they have become the hammer in the web developer's belt.

Your last possible option is to try out display: table, however IE6 and 7 don't support this (IE8 will). It takes something that you haven't marked up as a table (because semantically, it's not a table so shouldn't be turned into one) to ACT like a table.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is an example of where

This is an example of where to know explicitly what the content is becomes critical to best suggesting what elements ought or could be used and how they would be best styled and laid out.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

Wow that was fast, it must

Wow that was fast, it must not be 2 am everywhere...Thanks for all of the helpful links. I messed around with floats before, and they always made it go to the next line. Now I know I just had more reading to do. Thanks again!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hugo is right, though, which

Hugo is right, though, which technique you use does depend on what your content IS. For instance, what you posted is NOT what will be on your site (you aren't going to have headers without text underneath, are you?). Likely the headers themselves will not get floated but some other element, if you choose to float.

I'm no expert, but I fake one on teh Internets

9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

I am just doing some

I am just doing some exercises to develop my CSS muscles right now. As it seems all too common, I have created a beautiful, exactly-how-i-want-it-to-look page, only to open it up in IE and :curse::curse::curse:.

So, I'm creating an outline for a resume. I figure by the time I can format that and have it look good to the largest reasonable user base then I will have a much better grasp on things.

I have only tested in IE6 so far, but IE is making everything MUCH wider than FF. The books I have and internet searches have lead me to believe that this is IE not adding the percentages of various elements correctly (ala box plot hack). My use of percentages seem to complicate things greatly as I can't find a box plot hack style workaround with percentages. Any advice on this?

Your comment about the content determining the correct approach makes me think that I am taking the wrong approach on more than one level. Perhaps I should not use headings and instead create classes? Also, any general comments on my code would be greatly appreciated.

My CSS validated fine, but my XHTML gave me 5 errors related to declaring the doctype that I didnt understand.

Thanks, you have been a tremendous help to me!

This is what I have so far -

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	   <title>My Name Here</title>
	   <link rel="stylesheet" type="text/css" href="css/resume.css"/>
	</head>
  <body>
   <div id="container">
      <h1>My Name Here</h1>
   <div id="substance">
	<ul>
	  <li>555 Some Address</li>
	  <li>City, State 55555</li>
	  <li>emailadddress@domain.com</li>
	  <li>(555)555-5555</li>
	</ul>
       <h2>Objective</h2>
	<p>My objective goes here.  The text of the objective takes up this space.  This space has about this much text, maybe a bit more.</p>
 
	<h2>Education</h2>
	<h3>Program of Study</h3>	
	   <div class="where">Some Area Technical College</div>
	   <div class="time">Fall 1955 - Fall 1956</div>
	<h3>Diploma</h3>
	   <div class="where">City High School</div>
	   <div class="time">Fall 1950 - Spring 1954</div>
 
        <h2>Related Experience</h2>
	   <p>A brief paragraph explaining my related experience to the job that is being applied for.  A brief paragraph explaining my related experience to the job that is being applied for.  </p> 
	   <p>Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.</p>
 
        <h2>Employment Experience</h2>
	 <h3>Hydro Ceramic Technician</h3>
	    <div class="where">Company</div>
	    <div class="what">Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.  Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.</div>
		<div class="time">Aug 1957 - Dec 1958</div>
	    <div class="location">9999 Job Address</div>
	    <div class="stateloc">City, State/City, State</div>
	 <h3>Customer Relations Manager</h3>
	    <div class="where">Company B</div>
	    <div class="what">Brief job description.  Brief job description.  Brief job description.</div>
	    <div class="time">Aug 1954 - Oct 1955</div>
	    <div class="location">9999 Job Address</div>
	    <div class="stateloc">City, State</div>
	 <h3>Aligator Wrestler</h3>
	    <div class="where">Company C</div>
	    <div class="what">Another brief job description.  Another brief job description.  </div>
	    <div class="time">Dec 1956 - Aug 1957</div>
	    <div class="location">999 S Address</div>
	    <div class="stateloc">City, State</div>
	 <h3>Basket Weaver</h3>
	    <div class="where">Company Four</div>
	    <div class="what">This is easier to make than a real job description.  </div>
	    <div class="time">Summer 1950</div>
	    <div class="location">Location Address</div>
    	<div class="stateloc">Lenghty City Name, State</div>
	 <h3>Door Concierge</h3>
	    <div class="where">Yet Another Company Name</div>
	    <div class="what">Assisted residents in entering and exiting the facility.</div>
	    <div class="time">Jan 1956 - May 1956</div>
	    <div class="location">2555 Address</div>
	    <div class="stateloc">City, State</div>
	 <h3>Scuba Basket Weaver</h3>
	    <div class="where">Company Name goes here</div>
	    <div class="what">Super duper job description goes here.</div>
	    <div class="time">June 1951 - May 1955</div>
	    <div class="location">2555 Address</div>
	    <div class="stateloc">City, State</div>
   </div>
   </div>
  </body>
</html>

And my CSS
/* specify blanket rules for all elements */
body {
	margin:0;
	padding:0; 
	background-color:#CCC;
	font:normal 12px verdana, arial, sans-serif;
	}
/* container for all page content */
#container {
	position:absolute;
	margin:1em;
	padding:1em;
	background-color:#FFF;
	}
/* specify name styling */
h1 {
	color:#000;
	margin:0;
	padding:0;
	border:1px solid #000;
	}
/* specify content styling */
#substance {
	margin:0 10% 0 10%;
	overflow:auto;
	border:1px solid #000;
	}
/* specify contact info styling */
ul {
	list-style:none;
	margin:0;
	padding:0;
	}
ul li {
	display:inline;
	margin:0;
	padding:0 0 5% 2%;
	}
/* specify h2 styling */
h2 {
	float:left;
	clear:left;
	width:100%;
	margin:0;
	padding:1% 0 1% 0;
	border-top:1.5px solid #808080;
	}
/* specify pargraph stlying */
p {	
	clear:left;	
	line-height:150%;
	margin:0 0 1% 5%;
	border:1px solid #000;
	}
/* specify h3 styling */	
h3 {
	float:left;
	clear:left;
	width:35%;
	margin:0 0 0 5%;
	border:1px solid #000;
	}
/* specify the where class */
.where {
	float:left;
	width:20%;
	margin:0 0 1% 15%;
	font:.85em verdana, arial, sans-serif;
	border:1px solid #000;
	}
/* specify the time class */
.time {
	float:left;
	clear:left;
	width:18%;
	margin:0 0 0 15%;
	border:1px solid #000;
	}
/* specify the what class */
.what {
	float:left;
	width:80%;
	margin:0 0 0 10%;
	color:#808080;
	font:.94em verdana, arial, sans-serif;
	border:1px solid #000;
	}
/* specify the location class */
.location {
	float:left;
	width:20%;
	margin:0 0 0 5%;
	border:1px solid #000;
	}
/*specify the stateloc class */
.stateloc {
	float:left;
	width:30%;
	margin:0 0 0 10%;
	border:1px solid #000;
	}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Using headings isn't wrong

Using headings isn't wrong and all classes do is provide a means of attaching rules to an element via an alternative method other than stating the element name directly, they would allow you to add styles to an element that occurred more than once but where you wanted to target one and not the other; so it isn't a case of switching to classes.

You are overusing headings though, they provide for main page divisions/sections so use headings for example:

    * key skills
    * Current Employment
    * Employment History
    * Education

To markup something like this you essentially have four elements available to use:

    * 'h#' heading tags
    * 'P' paragraph tags
    * 'ul/ ol' lists
    * 'dl' definition lists

Looking at something like key skills you might lay it out thus:

<h3>Key Skills</h3>
 <ul>
    <li>key Skill 1</li>
    <li>key skill 2</li>
  </ul>

I would keep h1 for main title in the case of a resume h2 for the main sections
and h3 for groups within the main sections so you could have:

<h2>About Me</h2>
  <h3>Achievements</h3>
    <ul>
      <li>Achievement</li>
   </ul>
  <h3>key skills</h3>

The use of definition lists are really useful for this sort of layout and are very flexible in terms of construction; you could consider something like this for employment sections:

<h2>Employment</h2>
  <h3>Current Employment</h3>
   <dl>
      <dt>Employer</dt>
       <dd>Acme tools</dd>
       <dd><p>Address1<br />address2</p></dd>
      <dt>Position</dt>
       <dd><p>describe position held</p></dd>
      <dt>Responsibilities</dt>
       <dd>
         <ul><li>tea making</li><li>collecting bosses dry cleaning</li></ul>
       </dd>
   </dl>

The above are only very rough examples the important point is that one should lay out the content with the most flexible set of appropriate semantic elements possible, and NOT initially worry at all about CSS it's irrelevant to the process of setting out content, the page should read well without any extra layout styles other than browser defaults, only after that is achieved should one really think about further visual styling e.g maybe floating the DT to the left DD to the right, perhaps a box border around major h2 sections of the page would help difine areas etc.

So your first job is markup all the content, do not approach styling initially, when you are happy it reads well sans styles you may proceed to embellish things.

I would throw out the majority of the rules above you appear to be floating everything and there is likely little point in that also do not! use position:absolute until someone says you can Smile

Begin a fresh markup and post as you progress so people can advise as you go especially when you get to the styles stage.

If you are getting validation errors, describe them or paste the error message otherwise we won't be able to advise.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

Fresh Markup

Ok, I think I understand. (The position:absolute in the previous CSS was only throw in to get IE to render the overflow:auto correctly I promise!)

My code has one validation error that occurs eight times, one for each h3. Don't know if it helps but the red element occurs in the greater than (>) of the opening h3 tag.

Line 20, Column 10: document type does not allow element "h3" here; missing one of "object", "ins", "del", "map", "button" start-tag.
 
			<dt><h3> Program of Study Goes Here</h3></dt>
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
 
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

If I understood you correctly this new code should be more inline with what you're saying. Before I move past this I want to make sure I have a proper understanding of the underlying message. Are you saying that the markup should be designed to look easily understood without styling, and that while coding it I should give little or no regard to creating the potential hooks that CSS will use to style it later?

That answer should answer this question - do I present the information in the same sequential order as I ultimately wanted it presented, or is it more important to group like information? As in your example - is it better to group the data by type(employer name and address, job title and description)or in the order you want it presented(as I did with Title, employer, description, tenure, address) I know yours was just a rough example but it's seems like it may be an important distinction to make.

Thanks for your help, learning things the right way to start out with helps so much!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Nameis Goinghere</title>
		<link rel="stylesheet" type="text/css" href="css/resume.css"/>
	</head>
	<body>
		<h1>Nameis Goinghere</h1>
			<ul>
				<li>555 Some Address</li>
				<li>City, State 55555</li>
				<li>emailaddress@domain.com</li>
				<li>(555)555-5555</li>
			</ul>
		<h2>Objective</h2>
				<p>My objective goes here.  The text of the objective takes up this space.  This space has this much text.</p>
		<h2>Education</h2>
		<dl>
			<dt><h3>Program of Study Goes Here</h3></dt>
				<dd>Some Area Technical College</dd>
				<dd>Fall 1955 - Fall 1956</dd>
			<dt><h3>Diploma</h3></dt>
				<dd>MiscCity High School</dd>
				<dd>Fall 1950 - Spring 1954</dd>
		</dl>
		<h2>Computer Experience</h2>
			<p>A brief paragraph explaining my related experience to the job that is being applied for.  A brief paragraph explaining my related experience to the job that is being applied for.  </p> 
			<p>Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.</p>
		<h2>Employment Experience</h2>
		<dl>
			<dt><h3>Job Title Length One</h3></dt>
				<dd>Company Name One</dd>
				<dd><p>Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.  Lengthy job description.  This job is the most relevent for the position being applied for.</p></dd>
				<dd>Aug 1957 - Dec 1958</dd>
				<dd>9999 Job Address<br />City, State/City2, State2</dd>
			<dt><h3>Job Title Length two</h3></dt>
				<dd>Company B</dd>
				<dd><p>Brief job description.  Brief job description.  Brief job description.</p></dd>
				<dd>Aug 1954 - Oct 1955</dd>
				<dd>999 Job Address<br/>City, State</dd>
			<dt><h3>Aligator Wrestler</h3></dt>
				<dd>Company Name C</dd>
				<dd><p>another brief job description. another brief job description. </p></dd>
				<dd>Dec 1956 - Aug 1957</dd>
				<dd>999 S Street<br />City, State</dd>
			<dt><h3>Contract Basket Weaver</h3></dt>
				<dd>Company Four</dd>
				<dd><p>This is easier than making real job descriptions that matter.</p></dd>
				<dd>Summer 1956</dd>
				<dd>Location Addresss<br />Lengthy City, State</dd>
			<dt><h3>Door Concierge</h3></dt>
				<dd>Yet Another Company Name</dd>
				<dd><p>Assisted residents in entering and exiting the facility</p></dd>
				<dd>Jan 1956 - May 1956</dd>
				<dd>2555 Street Blvd<br />City, State</dd>
			<dt><h3>Basket Weaver</h3></dt>
				<dd>Company Name Goes Here</dd>
				<dd><p>A job description that describes things with adjectives that describe responsibility.</p></dd>
				<dd>June 1951 - May 1955</dd>
				<dd>2555 Street Rd<br />City, State</dd>
		</dl>		
	</body>
</html>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

The validation error is

The validation error is because headers are blocks and dt's may not have children who are blocks (and I think in this case, any headers you feel you need for inside those dl's would have to be between dl's, such as

header of whatever the next dl is about

next dl...
but the fact that your text is in a dt automatically means it's something like, TERM, and the rest is like DEFINITION which automatically have a similar relationship to HEADER and TEXT UNDER HEADER... so using the h3's here may be redundant as well as invalid : )

Quote:

Are you saying that the markup should be designed to look easily understood without styling, and that while coding it I should give little or no regard to creating the potential hooks that CSS will use to style it later?

All HTML documents should be marked up like some sort of ugly college paper. Headers where they make sense, the flow of the text where it makes sense, in logical order, and yes without regard to how it will LOOK.

However often while coding a page (marking up content) you may already know for a fact that you are going to wrap something around a group of info because you already know you'll want to do something special with it. This is the basic purpose of the

tag-- semantically meaning nothing, not displayed by itself on a web page, it's used later for cssing reasons. Content-wise, div's aren't there-- headers head the chunks of content which follow.

But for instance if I already know that I'm going to hide some header text behind some awesome image version of that same text, I may write
the text
but usually this is jumping the gun, and certainly when you're starting out with this stuff. Do pure, makes-sense HTML first.

Quote:

do I present the information in the same sequential order as I ultimately wanted it presented, or is it more important to group like information?

Hugo should have a better answer for this one, but I usually think of how it would look unstyled and printed out. How do most CV's/resume's read out? What order do they use? Yours will likely follow convention.

For things that you visually want to sit side-by-side, you'll have to know which vertical order makes more sense. You can also imagine listening to the page. What listening order makes the most sense? And some people do listen to web documents anyway, so this is always good to do.

For instance on another page you may visually want a text input with teh label underneath-- I've seen this on paper forms before, though not so common as label on top. Kinda like the dotted line you're supposed to sign, and the little text underneath saying "sign here". Since it makes logical sense for the label to come first, write it so-- you can use CSS to move it to underneath the input (usually) or next to it or wherever.

I'm no expert, but I fake one on teh Internets

9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

Ok, getting more clear all

Ok, getting more clear all the time Smile

I modified my markup and added some basic CSS. Both validate with no errors.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Nameis Goinghere</title>
		<link rel="stylesheet" type="text/css" href="css/resume.css"/>
	</head>
	<body>
		<h1>Nameis Goinghere</h1>
		<div id="squeeze">
			<ul>
				<li>555 Some Address</li>
				<li>City, State 55555</li>
				<li>emailaddress@domain.com</li>
				<li>(555)555-5555</li>
			</ul>
		<h2>Objective</h2>
				<p>My objective goes here.  The text of the objective takes up this space.  This space has this much text.</p>
		<h2>Education</h2>
		<dl>
			<dt>Program of Study Goes Here</dt>
				<dd>Some Area Technical College</dd>
				<dd>Fall 1955 - Fall 1956</dd>
			<dt>Diploma</dt>
				<dd>MiscCity High School</dd>
				<dd>Fall 1950 - Spring 1954</dd>
		</dl>
		<h2>Computer Experience</h2>
			<p>A brief paragraph explaining my related experience to the job that is being applied for.  A brief paragraph explaining my related experience to the job that is being applied for.  </p> 
			<p>Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.</p>
		<h2>Employment Experience</h2>
		<dl>
			<dt>Job Title Length One</dt>
				<dd>Company Name One</dd>
				<dd><p>Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.  Lengthy job description.  This job is the most relevent for the position being applied for.</p></dd>
				<dd>Aug 1957 - Dec 1958</dd>
				<dd>9999 Job Address</dd>
				<dd>City, State/City2, State2</dd>			
			<dt>Job Title Length two</dt>
				<dd>Company B</dd>
				<dd><p>Brief job description.  Brief job description.  Brief job description.</p></dd>
				<dd>Aug 1954 - Oct 1955</dd>
				<dd>999 Job Address</dd>
				<dd>City, State</dd>
			<dt>Aligator Wrestler</dt>
				<dd>Company Name C</dd>
				<dd><p>another brief job description. another brief job description. </p></dd>
				<dd>Dec 1956 - Aug 1957</dd>
				<dd>999 S Street</dd>
				<dd>City, State</dd>
			<dt>Contract Basket Weaver</dt>
				<dd>Company Four</dd>
				<dd><p>This is easier than making real job descriptions that matter.</p></dd>
				<dd>Summer 1956</dd>
				<dd>Location Addresss</dd>
				<dd>Lengthy City, State</dd>
			<dt>Door Concierge</dt>
				<dd>Yet Another Company Name</dd>
				<dd><p>Assisted residents in entering and exiting the facility</p></dd>
				<dd>Jan 1956 - May 1956</dd>
				<dd>2555 Street Blvd</dd>
				<dd>City, State</dd>
			<dt>Basket Weaver</dt>
				<dd>Company Name Goes Here</dd>
				<dd><p>A job description that describes things with adjectives that describe responsibility.</p></dd>
				<dd>June 1951 - May 1955</dd>
				<dd>2555 Street Rd</dd>
				<dd>City, State</dd>
		</dl>
		</div>
	</body>
</html>

And my CSS.

/*specify blanket rules for all elements */
body {
	margin:.5em;
	padding:.5em;
	font:normal 12px verdana, arial, sans-serif;
	}
/* specify h1 styling */
h1 {
	font-size:2.5em;
	}
/* specify squeeze styling */
#squeeze {
	margin:0 15% 0 15%;
	}
/* specify list styling */
ul {
	list-style-type:none;
	}
ul li {
	display:inline;
	padding:1% 5% 1% 1%;
	border:1px solid #000;
	}
/* specify h2 styling */
h2 {
	float:left;
	clear:left;
	width:100%;
	border-top:1px solid #000;
	}
/* specify definition list styling */
dt {
	float:left;
	clear:left;
	width:30%;
	margin:1% 0 0 5%;
	border:1px dotted #000; 
	font-size:1.2em;
	}
dd {
	float:left;
	clear:right;
	width:23%;
	margin:1% 0 1% 10%;
	border:1px solid #000;
	}
/* specify paragraph styling */
p {
	float:left;
	margin:1% 0 0 5%;
	width:95%;
	line-height:150%;
	border:2px solid #000;
	}

I had two issues that I'm not sure if I made the correct approach on.

The first is the job description not spanning the entire width. The second issue was the tenure, address, and state not lining up across the bottom.

To correct these issues I removed the job description paragraph from the DL and ended the DL right before it. After that I created an UL and put the tenure, address, and state info within. Effectively I modified the markup to have each employment entry go from being a DL to a DL followed by a paragraph and then an UL.

Again, both validate with no errors. Did I handle this appropriately? Any input would be greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Nameis Goinghere</title>
		<link rel="stylesheet" type="text/css" href="css/raesume1.css"/>
	</head>
	<body>
		<div id="headmast">
		<h1>Nameis Goinghere</h1>
			<ul>
				<li>555 Some Address</li>
				<li>City, State 55555</li>
				<li>emailaddy@domain.com</li>
				<li>(555)555-5555</li>
			</ul>
		</div>
		<div id="squeeze">
		<h2>Objective</h2>
				<p>My objective goes here.  The text of the objective takes up this space.  This space has this much text.</p>
		<h2>Education</h2>
		<dl>
			<dt>Program of Study Goes Here</dt>
				<dd>Some Area Technical College</dd>
				<dd>Fall 1955 - Fall 1956</dd>
			<dt>Diploma</dt>
				<dd>MiscCity High School</dd>
				<dd>Fall 1950 - Spring 1954</dd>
		</dl>
		<h2>Computer Experience</h2>
			<p>A brief paragraph explaining my related experience to the job that is being applied for.  A brief paragraph explaining my related experience to the job that is being applied for.  </p> 
			<p>Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.</p>
		<h2>Employment Experience</h2>
		<dl>
			<dt>Job Title Length One</dt>
			<dd>Company Name One</dd>
		</dl>
			<p>Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.  Lengthy job description.  This job is the most relevent for the position being applied for.</p>
		<ul>
			<li>Aug 1957 - Dec 1958</li>
			<li>9999 Job Address</li>
			<li>City, State/ City2, State2</li>
		</ul>
		<dl>
			<dt>Job Title Length two</dt>
			<dd>Company B</dd>
		</dl>
			<p>Brief job description.  Brief job description.  Brief job description.</p>
		<ul>
			<li>Aug 1954 - Oct 1955</li>
			<li>999 Job Address</li>
			<li>City, State</li>
		</ul>
		<dl>
			<dt>Aligator Wrestler</dt>
			<dd>Company Name C</dd>
		</dl>
			<p>another brief job description. another brief job description. </p>
		<ul>
			<li>Dec 1956 - Aug 1957</li>
			<li>999 S Street</li>
			<li>City, State</li>
		</ul>
		<dl>
			<dt>Contract Basket Weaver</dt>
			<dd>Company Four</dd>
		</dl>
			<p>This is easier than making real job descriptions that matter.</p>
		<ul>
			<li>Summer 1956</li>
			<li>Location Addresss</li>
			<li>Lengthy City, State</li>
		</ul>
		<dl>
			<dt>Door Concierge</dt>
			<dd>Yet Another Company Name</dd>
		</dl>			
			<p>Assisted residents in entering and exiting the facility</p>
		<ul>
			<li>Jan 1956 - May 1956</li>
			<li>2555 Street Blvd</li>
			<li>City, State</li>
		</ul>
		<dl>
			<dt>Basket Weaver</dt>
			<dd>Company Name Goes Here</dd>
		</dl>
			<p>A job description that describes things with adjectives that describe responsibility.</p>
		<ul>
			<li>June 1951 - May 1955</li>
			<li>2555 Street Rd</li>
			<li>City, State</li>
		</ul>		
		</div>
	</body>
</html>

Of course, my CSS had to be modified to reflect the markup changes.
(I also changed the formatting of the top h1 and UL elements with the introduction of the headmast ID)

/*specify blanket rules for all elements */
body {
	margin:.5em;
	padding:.5em;
	font:normal 12px verdana, arial, sans-serif;
	}
/* specify headmast styling */
#headmast h1 {
	font-size:2.5em;
	margin:.5em .5em 0 0;
	padding:.5em .5em 0 0;
	border:1px solid #000;
	}
#headmast ul {
	list-style-type:none;
	margin-top:0;
	padding-top:0;
	width:80%;	
	}
#headmast ul li {
	float:left;
	width:23%;
	padding:0 0 0 1%;
	border:1px solid #000;
	}
/* specify squeeze styling */
#squeeze {
	margin:0 15% 0 15%;
	}
/* specify list styling */
#squeeze ul {
	list-style-type:none;
	padding:0 0 0 10%;
	}
#squeeze ul li {
	float:left;
	width:30%;
	padding:1% 0% 1% 0%;
	border:1px solid #000;
	}
/* specify h2 styling */
h2 {
	float:left;
	clear:left;
	width:100%;
	border-top:1px solid #000;
	}
/* specify definition list styling */
dl {
 
	}
dt {
	float:left;
	clear:left;
	width:40%;
	margin:1% 0 0 5%;
	border:1px dotted #000;
	font-size:1.2em;
	}
dd {
	float:left;
	clear:right;
	width:35%;
	margin:1% 0 1% 10%;
	border:1px solid #000;
	}
/* specify paragraph styling */
p {
	float:left;
	margin:0 0 1% 7.5%;
	width:95%;
	line-height:150%;
	border:2px solid #000;
	}

Thanks for all the help I wouldn't be where I am now without it!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:If I understood you

Quote:

If I understood you correctly this new code should be more inline with what you're saying. Before I move past this I want to make sure I have a proper understanding of the underlying message. Are you saying that the markup should be designed to look easily understood without styling, and that while coding it I should give little or no regard to creating the potential hooks that CSS will use to style it later?

Poes has already answered this but I'm going to labour the point as it's often not really understood well.

Markup is simply a method of conveying data, what we generally refer to as 'Content' and in this sense markup and the form we use HTML is a very simple and straightforward structure, in a sense you could call it crude as it is definitely not overly sophisticated, but then it doesn't need to be to do the job required, it's essentially as fully formed as it needs to be.

With that understanding the crucial aspect is to determine the best elements to structure your data with to add a modicum of semantic meaning to what is simply otherwise a series of characters devoid of meaning.

Next it's important to understand that a document flows in order, top to bottom, elements fall into place naturally if they are given basic block level element structure ,using headings and paragraphs along with any lists provide a default natural flow as they are all block level and each follows the next; therefore you are actually laying out your data in a human readable form it is as though you were attempting to read a paper document.

The reason that we often say to not worry about styles is that CSS styling, especially CSS-P is simply a means to embellish your data and apply a little extra layout control, but it is not essential (we ignore the default styling as that must exist)

So one must be able to understand the document in this basic sense with no styles applied by the author, if it makes sense then you have a solid framework from which to progress to the next stage.

As for hooks you can place them and perhaps should; like Poes I will always tend to write a lot of extraneous markup , but that is because I know that I will need it, I will aggregate certain groups of related data or sections of the page even though I may not really need them but that is to retain a certain flexibility and also requires a little experience to deal with; I always ID primary elements and sections and classes where elements are repeated such as dynamic content that repeats and needs a identifier, I dislike major elements not having a means of hooking into to or simply a means of directly targeting styles to.

Quote:

do I present the information in the same sequential order as I ultimately wanted it presented, or is it more important to group like information?

Yes! but wouldn't that be groping like information? generally a CV will follow a convention in terms of layout, As a basic idea, at least in my experience, you start with personal info and key skills and major achievements, you follow that with again generally your present/current employment then you show your employment history in reverse chronological order, lastly you list you education and exam results.

If you were to print the rendered page it should print well enough to read clearly and in the order that you have marked it up, you shouldn't require any styles in order for the page to work as a readable printable document.

Now you can add styles to make the document more pleasant on the eye in both viewport and in print but keep it to a minimum it's a CV don't distract people with clever formatting.

Above all else always lay the page out in markup terms so that it reads logically do not lay it out in an order that you think suits the possible styling you want to add Items side by side? fine, we read left to right so the left item is the primary one and represents the first one in the markup flow. Remember we can visually render elements wherever we like using CSS so never overly worry where things sit in the markup flow they must flow as makes sense in human readable terms. N.B there are minor exceptions to some of this of course but nothing to worry too much about.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

That's great information,

That's great information, thank you for the clarification.

Since I can break the link to my style sheet and have it well understood, it seems I might be best served by bringing my CSS up to par. I can't help but think that as Hugo said, all I'm doing is floating everything (and defining width's to get everything to mesh up the way I want it to look). I can't think of a way besides floating to make the job title heading and company name to be inline, and once I do that it seems only natural to continue to float and define widths. Just like I thought my markup was fine before, it seems too good to be true that I would have made my CSS inline with best practices by chance.

I'm sorry I couldn't bring more to the table on this. Searching for subjects like this are difficult to return applicable results, especially when I'm not sure what the right key words would be.

I have not made any real changes to the markup, but here it is for convenience sake. (both validate with no errors)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
 
		<title>Nameis Goinghere</title>
 
		<link rel="stylesheet" type="text/css" href="css/resume1.css"/>
 
	</head>
 
	<body>
 
		<div id="container">
 
		<div id="headmast">
 
		<h1>Nameis Goinghere</h1>
 
			<ul>
 
				<li>555 Some Address</li>
 
				<li>City, State 55555</li>
 
				<li>emailaddy@domain.com</li>
 
				<li>(555)555-5555</li>
 
			</ul>
 
		</div>
 
		<div id="squeeze">
 
		<h2>Objective</h2>
 
				<p>My objective goes here.  The text of the objective takes up this space.  This space has objective text.</p>
 
		<h2>Education</h2>
 
		<dl>
 
			<dt>Degree or Program of Study</dt>
 
				<dd>Some Area Technical College</dd>
 
				<dd>Fall 1955 - Fall 1956</dd>
 
			<dt>Diploma</dt>
 
				<dd>MiscCity High School</dd>
 
				<dd>Fall 1950 - Spring 1954</dd>
 
		</dl>
 
		<h2>Computer Experience</h2>
 
			<p>A brief paragraph explaining my related experience to the job that is being applied for.  A brief paragraph explaining my related experience to the job that is being applied for.  </p> 
 
			<p>Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.</p>
 
		<h2>Employment Experience</h2>
 
		<dl>
 
			<dt>Job Title Length One</dt>
 
			<dd>Company Name One</dd>
 
		</dl>
 
			<p>Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.  Lengthy job description.  This job is the most relevent for the position being applied for.</p>
 
		<ul>
 
			<li>Aug 1957 - Dec 1958</li>
 
			<li>9999 Job Address</li>
 
			<li>City, State/ City2, State2</li>
 
		</ul>
 
		<dl>
 
			<dt>Job Title Length two</dt>
 
			<dd>Company B</dd>
 
		</dl>
 
			<p>Brief job description.  Brief job description.  Brief job description.</p>
 
		<ul>
 
			<li>Aug 1954 - Oct 1955</li>
 
			<li>999 Job Address</li>
 
			<li>City, State</li>
 
		</ul>
 
		<dl>
 
			<dt>Aligator Wrestler</dt>
 
			<dd>Company Name C</dd>
 
		</dl>
 
			<p>another brief job description. another brief job description. </p>
 
		<ul>
 
			<li>Dec 1956 - Aug 1957</li>
 
			<li>999 S Street</li>
 
			<li>City, State</li>
 
		</ul>
 
		<dl>
 
			<dt>Contract Basket Weaver</dt>
 
			<dd>Company Four</dd>
 
		</dl>
 
			<p>This is easier than making real job descriptions that matter.</p>
 
		<ul>
 
			<li>Summer 1956</li>
 
			<li>Location Addresss</li>
 
			<li>Lengthy City, State</li>
 
		</ul>
 
		<dl>
 
			<dt>Door Concierge</dt>
 
			<dd>Yet Another Company Name</dd>
 
		</dl>			
 
			<p>Assisted residents in entering and exiting the facility</p>
 
		<ul>
 
			<li>Jan 1956 - May 1956</li>
 
			<li>2555 Street Blvd</li>
 
			<li>City, State</li>
 
		</ul>
 
		<dl>
 
			<dt>Basket Weaver</dt>
 
			<dd>Company Name Goes Here</dd>
 
		</dl>
 
			<p>A job description that describes things with adjectives that describe responsibility.</p>
 
		<ul>
 
			<li>June 1951 - May 1955</li>
 
			<li>2555 Street Rd</li>
 
			<li>City, State</li>
 
		</ul>		
 
		</div>
 
		</div>
 
	</body>
 
</html>

And my CSS.

/*specify blanket rules for all elements */
 
body {
 
	margin:.5em;
 
	padding:.5em;
 
	background-color:#CCC;
 
	font:normal 11px verdana, arial, sans-serif;
 
	}
 
/* specify container styling */
 
#container {	
 
	overflow:auto;
 
	margin:.5em;
 
	padding:.5em;
 
	background-color:#FFF;
 
	}
 
/* specify headmast styling */
 
#headmast h1 {
 
	font-size:2.5em;
 
	margin:0 .5em 0 0;
 
	padding:0 .5em 0 0;
 
	border:1px solid #000;
 
	}
 
#headmast ul {
 
	list-style-type:none;
 
	margin-top:0;
 
	padding-top:0;
 
	width:80%;	
 
	}
 
#headmast ul li {
 
	float:left;
 
	width:23%;
 
	padding:0 0 0 1%;
 
/*	border:1px solid #000;*/
 
	}
 
/* specify squeeze styling */
 
#squeeze {
 
	margin:0 15% 0 15%;
 
/*	border:5px dashed #000; */
 
	}
 
/* specify squeeze list styling */
 
#squeeze ul {
 
	list-style-type:none;
 
	padding:0 0 0 10%;	
 
	}
 
#squeeze ul li {
 
	float:left;
 
	width:30%;
 
	padding:1% 0% 1% 0%;
 
/*	border:3px solid #000;*/
 
	}
 
/* specify h2 styling */
 
h2 {
 
	float:left;
 
	clear:left;
 
	width:100%;
 
	border-top:1px solid #000;
 
	}
 
/* specify definition list styling */
 
dl {
 
	width:100%;	
 
/*	border:1px dotted #000;*/
 
	}
 
dt {
 
	float:left;
 
	clear:left;
 
	width:40%;
 
	margin:1% 0 0 2%;
 
/*	border:1px dotted #000;*/
 
	font-size:1.25em;
 
	}
 
dd {
 
	float:left;
 
	clear:right;
 
	width:35%;
 
	margin:1% 0 1% 10%;
 
/*	border:1px solid #000;*/
 
	}
 
/* specify paragraph styling */
 
p {
 
	float:left;
 
	margin:0 0 1% 4%;
 
	width:100%;
 
	line-height:150%;
 
/*	border:2px solid #000;*/
 
	}
 
/* specify footer styling */
 
#footer h3 {
 
	float:left;
 
	width:100%;
 
	font-size:1em;
 
	margin:.5em .5em 0 0;
 
	padding:.5em .5em 0 0;
 
/*	border:1px solid #000;*/
 
	}
 
#footer ul {
 
	list-style-type:none;
 
	margin-top:0;
 
	padding-top:0;
 
	width:80%;	
 
	}
 
#footer ul li {
 
	float:left;
 
	width:23%;
 
	padding:0 0 0 1%;
 
/*	border:1px solid #000;*/
 
	}

Any comments would be appreciated. I can't thank you enough for all your help.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 42 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:I'm sorry I couldn't

Quote:

I'm sorry I couldn't bring more to the table on this. Searching for subjects like this are difficult to return applicable results, especially when I'm not sure what the right key words would be.

Yes, that is hard. I still run into it-- when I had just IE7 (not 6 or anyone else) mysteriously cutting off the far-right side of a table yesterday, searching on Google made me get a lot of problems people were having with tables in WORD! My Google-fu isn't all that anyway, but as you learn this craft you will run across the popular names for things like popular bugs. They become much easier to google, which is why any CSS forums that have stickies, read them or at least skim them to get the terms. That'll also help you use forum searches.

Semantics are great for arguing over. Chicken? Egg? So while your HTML is looking pretty good, I could argue this:

<h2>Employment Experience</h2> (so everything that comes after, until the next header, is about job experience)
<dl>
  <dt>Job Title Length One</dt>
  <dd>Company Name One</dd> (now one cool thing about dl's is there may be multiple dd's for a single dt, just like a dictionary term may have several definitions)
  <dd class="possibly a class for styling as it's soo much longer than the "regular" dd's">Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.  Lengthy job description.  This job is the most relevent for the position being applied for.</dd>
  <dd> (dd's can have lots of blocks inside them, which is soooo useful when writing Terms & Conditions : )
    <ul>
      <li>Aug 1957 - Dec 1958</li>
      <li>9999 Job Address</li>
      <li>City, State/ City2, State2</li>
    </ul>
  </dd>
</dl>

or

Employment Experience (so everything that comes after, until the next header, is about job experience)

Job Title Length One

Company Name One

Lengthy job description. This job is the most relevent for the position being applied for so it is being described in great detail. Lengthy job description. This job is the most relevent for the position being applied for.

  • Aug 1957 - Dec 1958
  • 9999 Job Address
  • City, State/ City2, State2

[/code]

Where the p and the ul are siblings within a single dd.

I've seen multiple versions of this, but your version isn't bad (I would argue that if the dates are part of the "Company Name One" then it would make more semantic sense to try to keep the dates list inside that Company One's DL-- otherwise, if the ul is just a sibling (instead of a child) to the dl, then they could be interpreted as two different things... the dates have no semantic relationship to Company One or Company Two, so people would need to infer the relationship by matching up the idea that after each Company dl there's a list of dates, and the first company doesn't have dates before it...

Of course, real people never see the code, so sometimes semantics are us just talking to ourselves. As metadata and non-human user agents become more and more used, though, semantic markup has more possibility to matter.

Anyway, after you have your HTML the way you want, is your current CSS making the page Look the way you want? If not, post a screenshot of the desired effect and we can point you the way (prolly listing a bunch of links regarding techniques you might end up using). Like with Perl, in CSS there's more than one way to do it. This is a blessing and a curse : )

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Poes has shown you how you

Poes has shown you how you can nest lists inside of a DD and indeed both the dd and li elements can hold any other element; so often overlooked is the fact that you can use these elements in this manner.

Think about this aspect: you have a series of employment history details to enter, that could be termed a list so one could possibly do this:

<h2>employment history</h2>
<ul>
  <li>
    <dl>
    <dt>Job Title Length One</dt>
    <dd>Company Name One</dd> 
    <dd class="">Lengthy job description. <snip> too lengthy :)</dd>
    <dd> 
       <ul>
          <li>Aug 1957 - Dec 1958</li>
          <li>9999 Job Address</li>
          <li>City, State/ City2, State2</li>
       </ul>
    </dd>
  </li>
  <li><p>And another period of employment goes here!</p></li>
</ul>

A neat list of employment and more than sufficient elements to style with, you should be able to create many variations of layout with just this set of elements

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

Yes, initially that is the

Yes, initially that is the approach I wanted to take. However, if I do that it seems much more difficult to style, which is of course the wrong reason to sacrifice semantics!

If there is a way to keep the definition list intact it would obviously be preferred, but is beyond me at the moment.

How I want it to look

I tried to create a class that specifies the width, but I can't seem to get it to "break out" of the previously defined width of the dd element. Since it's worth a thousand words...

Edit:Upon looking at the text of hugo I realized I was making an error in my code, instead of declaring the class within the element I created a new div...it looks how it should now. Thanks again for all the help!

9four
Offline
newbie
Last seen: 13 years 21 weeks ago
Joined: 2009-03-18
Posts: 9
Points: 0

Alright I'm honing in on

Alright I'm honing in on what I'm really looking for, but now I'm getting a horizontal scroll bar within my "container" ID. I'm all but certain it is caused by the list in my headmast ID, but I can't figure out why it's doing it. I want it to line up with the rest of the elements in the squeeze ID, but when I accomplish that I also create the horizontal scroll bar.

It's not really something I could capture with less than a half dozen pictures. I created a dashed border around the entire UL in the headmast that extends the width of the scroll bar, the actual LI border shows exactly as I would expect it to.

To view the output http://www.webdevout.net/test?0c&raw
Or to play with markup/css http://www.webdevout.net/test?0c

markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
 
		<title>Nameis Goinghere</title>
 
		<link rel="stylesheet" type="text/css" href="css/resume2.css"/>
 
	</head>
 
	<body>
 
		<div id="container">
 
		<div id="headmast">
 
		<h1>Nameis Goinghere</h1>
 
			<ul>
 
				<li>555 Some Address</li>
 
				<li>City, State 55555</li>
 
				<li>emailaddy@domain.com</li>
 
				<li>(555)555-5555</li>
 
			</ul>
 
		</div>
 
		<div id="squeeze">
 
		<h2>Objective</h2>
 
				<p>My objective goes here.  The text of the objective takes up this space.  This space has objective text.</p>
 
		<h2>Education</h2>
 
		<dl>
 
			<dt>Degree or Program of Study</dt>
 
				<dd>Some Area Technical College</dd>
 
				<dd>Fall 1955 - Fall 1956</dd>
 
			<dt>Diploma</dt>
 
				<dd>MiscCity High School</dd>
 
				<dd>Fall 1950 - Spring 1954</dd>
 
		</dl>
 
		<h2>Computer Experience</h2>
 
			<p>A brief paragraph explaining my related experience to the job that is being applied for.  A brief paragraph explaining my related experience to the job that is being applied for.  </p> 
 
			<p>Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.  Further detailing my related applicable experience.</p>
 
		<h2>Employment Experience</h2>
		<ul>
		<li>
			<dl>
 
			<dt>Job Title Length One</dt>
 
			<dd>Company Name One</dd>
			<dd class="widen">
 
			<p>Lengthy job description.  This job is the most relevent for the position being applied for so it is being described in great detail.  Lengthy job description.  This job is the most relevent for the position being applied for.</p>
 
			<ul>
 
				<li>Aug 1957 - Dec 1958</li>
 
				<li>9999 Job Address</li>
 
				<li>City, State/ City2, State2</li>
 
			</ul>
			</dd>
			</dl>
		</li>
 
		<li>
			<dl>
 
			<dt>Job Title Length two</dt>
 
			<dd>Company B</dd>
			<dd class="widen">
 
			<p>Brief job description.  Brief job description.  Brief job description.</p>
 
			<ul>
 
				<li>Aug 1954 - Oct 1955</li>
 
				<li>999 Job Address</li>
 
				<li>City, State</li>
			</ul>
			</dd>
			</dl>
		</li>
		<li>
 
			<dl>
 
			<dt>Aligator Wrestler</dt>
 
			<dd>Company Name C</dd>
			<dd class="widen">
 
			<p>another brief job description. another brief job description.</p>
 
			<ul>
 
				<li>Dec 1956 - Aug 1957</li>
 
				<li>999 S Street</li>
 
				<li>City, State</li>
			</ul>
			</dd>
			</dl>
		</li>
		<li>
			<dl>
 
			<dt>Contract Basket Weaver</dt>
 
			<dd>Company Four</dd>
 
			<dd class="widen">
 
			<p>This is easier than making real job descriptions that matter.</p>
 
			<ul>
 
				<li>Summer 1956</li>
 
				<li>Location Addresss</li>
 
				<li>Lengthy City, State</li>
 
			</ul>
			</dd>
			</dl>
		</li>
		<li>
			<dl>
 
			<dt>Door Concierge</dt>
 
			<dd>Yet Another Company Name</dd>
 
			<dd class="widen">
 
			<p>Assisted residents in entering and exiting the facility</p>
 
			<ul>
 
				<li>Jan 1956 - May 1956</li>
 
				<li>2555 Street Blvd</li>
 
				<li>City, State</li>
 
			</ul>
			</dd>
			</dl>
		</li>
		<li>
			<dl>
 
			<dt>Basket Weaver</dt>
 
			<dd>Company Name Goes Here</dd>
 
			<dd class="widen">
			<p>A job description that describes things with adjectives that describe responsibility.</p>
 
			<ul>
 
				<li>June 1951 - May 1955</li>
 
				<li>2555 Street Rd</li>
 
				<li>City, State</li>
			</ul>
			</dd>
			</dl>
		</li>
 
		</ul>		
 
		</div>
 
		</div>
 
	</body>
 
</html>

and CSS

/*specify blanket rules for all elements */
 
body {
 
	margin:.5em;
 
	padding:.5em;
 
	background-color:#CCC;
 
	font:normal 11px verdana, arial, sans-serif;
 
	}
 
/* specify container styling */
 
#container {	
 
	overflow:auto;
 
	margin:.5em;
 
	padding:.5em;
 
	background-color:#FFF;
 
	}
 
/* specify headmast styling */
 
#headmast h1 {
 
	font-size:2.5em;
 
	margin:0 .5em 0 0;
 
	padding:0 .5em 0 0;
 
	border:1px solid #000;
 
	}
 
#headmast ul {
 
	list-style-type:none;
 
	margin:0 0 0 15%;
 
	padding:0;
 
	width:100%;
	border:1px dashed #000;
	}
 
#headmast ul li {
 
	float:left;
 
	width:15%;
 
	padding:0 .5% 0 2%;
 
	border:1px solid #000;
 
	}
 
/* specify squeeze styling */
 
#squeeze {
	overflow:auto;
 
	margin:0 15% 0 15%;
 
	}
 
/* specify h2 styling */
 
h2 {
 
	float:left;
 
	clear:left;
 
	width:100%;
 
	border-top:1px solid #000;
 
	}
/* specify paragraph styling */
p {
	float:left;
 
	margin:0 0 1% 4%;
 
	width:95%;
 
	line-height:150%;
 
/*	border:2px solid #000;*/
	}
/* specify definition list styling */
dl {
 
	width:100%;	
 
/*	border:1px dotted #000;*/
 
	}
 
dt {
 
	float:left;
 
	clear:left;
 
	width:40%;
 
	margin:1% 0 0 2%;
 
/*	border:1px dotted #000;*/
 
	font-weight:bold;
	font-size:1.2em;
 
	}
 
dd {
 
	float:left;
 
	clear:right;
 
	width:35%;
 
	margin:1% 0 1% 10%;
 
/*	border:1px solid #000;*/
 
	}
/* specify list styling */
ul {
	margin:0 0 0 -5%;
	list-style-type:none;	
	}
/* specify the widen class */
.widen {
	width:95%;
	margin:0;
	}
.widen ul {
	margin:0;
	list-style-type:none;
	}
.widen ul li {
	float:left;
 
	width:32%;
 
	padding:1% 0% 1% 0%;
	}

edit:I was able to fix the problem by specifying the headmast with overflow:hidden. Since I keep fixing my own problems, I'll just shut up now! Thanks again for all the help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Probably this: #headmast

Probably this:

#headmast ul {
 
	list-style-type:none;
 
	margin:0 0 0 15%;<<<<<<<<<<<<
 
	padding:0;
 
	width:100%; <<<<<<<<

You have something 100% wide - as wide as it can get - and then you are asking for a 15% left margin on top of that width

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me