I am working on a website for a class, and the assignment for this chapter is working with positioning. I'm having issues getting it to do what I want.
the first issue appeared a few chapters back when I added images. the border is not extending to fit the new images.
I think relates to second issue image the image on the right is covering up text I would think this should just extend the border and show under the image.
I also want to move the link table underneath the links on the left side. then have text in the center. I'm having trouble understanding the way the book explains the stuff like relative positioning, absolute, float. so this is making hard to figure out how to do what I want. the teacher doesn't understand what I'm trying to do and only help she gave was add a few divs around some sub elements.
I'll attach my CSS, and web page. any tips appreciated on how I can do this, i'm not exactly sure what would be best to do what I want. whether float relative, absolute, or a combination.
files are attacked as .txt files upload failed for html, css.

 

I haven't had too much experience with HTML5 or CSS3 yet, but these seem like the typical layout problems...

The border is not extending because you have the images as absolute.
From the w3schools website:

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.

Since it is removed from the flow, the page is laid out like the images aren't there

I usually say not to mix more than two positioning types, there are exceptions, of course.

If all you are going for is a single layout with a single display, then you could easily ascribe a width to the div with the border and position everything relative to that.

 

Have you tried HTML kit? Easier than uploading to the web each time.

 

ok I'll look into it. originally even with no positioning I had issues with the border not wanting to extend. i'd prefer not to have more of a fluid lyout because currently I run 12801024 resolution the teacher wants the it to still work at a 1200X760 resolution minimum so probably limited on specifying static sizes for anything but images.

 

ok I'll look into it. originally even with no positioning I had issues with the border not wanting to extend.

...as long as you keep it within the <div> and don't force the width of the <div> it should automatically resize...


I'd suggest going through the examples on w3schools...