Positioning issues

[donnie]

I am currently taking an Intro to Web design course; this unit we are building a career page using ordered and unordered lists. We also have to apply an external CSS to our page, use the div tag where applicable, and use a horizontal rule or hr tag.

 

Here is my problem.

The only way I can get my hr to display underneath my content (which is in div containers inside a div wrapper) is to declare a height other than auto. But, I have to adjust this height as my content gets larger to ensure that the content doesn't flow over the hr element.

 

Here is my CSS

 

body {
background-color: #ffdfd0;
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008b;
line-height: 1.5em;
}

#left {
margin: 0px auto;
text-align: center;
width: 600px; 
height: 75px; 
}

/* Center content */
#container {
margin: 0px auto;
width: 1000px;  
}

#wrapper {
margin:0px auto;
width:900px;
height: 150%; /*important adjustment for spacing between content and hr element */
}

#content1 {
float: left;
width: 350px;
}

#content2 {
float: right;
width: 350px;
}

h1{
text-align: center
}

/* not in use */
#seperator{
width: 900px;
height: 20px;
}

 

Is there anyway I can make this to where I don't have to adjust the height every time my content increases or decreases?

 

here is my site: My Career Page

[falkencreative]

I'm getting an error when trying to visit your page, so I can't test and tell for sure... But I believe you'll just need to add an extra line in your CSS file:

 

hr { clear:both; }

 

In general, I try to avoid using

---

's because of browser styling issues -- it's hard to style them in such a way that they look consistent across all browsers.

[jlhaslip]

border-bottom will (usually) do the same thing as an hr tag and can be styled to look uniform across browsers.

[donnie]

http://www.donnieadams.webs.com/career.htm

 

I had the url wrong.

I have to use hr as part of my class assignment.

[LSW]

That is silly, the HR is rarely used in any web design these days.

 

OK, you can place it at the bottom of the container holding the information. give it a absolute position say 5 pixels from the bottom of the container. Assuming the container is flexible and adjusts to fit the content, the HR will always stay 5 pixels from the bottom of the container, regardless of where the bottom is.

 

CSS is less about code as looking at the problems from a different angle, you seem to look at it from the traditional HTML tables view. If I glue a bencil 5 inches from the bottom of the box... and lift and lower the box... it will always bee 5 inches from the bottom right?

[jlhaslip]

Add a doctype and have a look at the validator results.

 

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.donnieadams.webs.com%2Fcareer.htm&charset=(detect+automatically)&doctype=Inline&group=0

 

Just trying to help you pass the course.