How to achieve this layout without fighting CSS

Question

I understand that there are a few questions about this issue here, but I have a rather unique fix. I am working on a template that should include certain tags, and should work with other elements that are added to the template after loading the code. I would not worry about this, but I have time trying to find the footer at the bottom of the page. I can’t change anything about the footer, and it appears at the bottom of the div, which I use as a wrapper. The problem is that if I set the height to a fixed value, there can be so many comments made before the div comment overlaps the footer. I tried several different solutions, including setting the container div height for automatic, overflow for automatic, bottom margin to 65 (footer height) and setting overflow for scrolling for div comment (which led to very free comments).

The following is an example of the problem and the template in its current form.

Here is the CSS style for the div container (div id = Main)

#Main { margin: 0px auto auto auto; background-color: #808080; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: medium; font-variant: normal; color: #FFFFFF; width: 900px; position: relative; } 

Here's the CSS style for the div comments

 #Comments { background-color: #008080; width: 450px; height: auto; top: 1750px; left: 450px; position: absolute; overflow: auto; } 

And this is how divs fit into the body

 <div id="Main"> ... <div id="Comment_Form"> <!--[COMMENT_FORM=400,200]--> </div> <div id="Comments"> <!--[COMMENTS=400]--> Comments </div> </div> 

Since the page will be heavy, I try to keep the code light (and probably mistaken it quite badly).

Thank you for your help, and I will send the template for now if anyone needs it.

EDIT:

Well, it occurred to me that a) I need to redo the CSS and divs that I have, and b) I don't know how to do this using pure CSS, or at least dealing with it as one of told you. I am trying to achieve this:

I have no clue. How to do it. and any help would be greatly appreciated (as well as any way to avoid having each element in its own div)

Answer 1

It seems you are really fighting CSS on this page. Most of your elements are positioned absolutely in your #Main class. This will force you to specify a lot more layout than you really want. It also means that if you have a variable number of comments or dynamic content, you will find that it is much more difficult to expand your content containers, while others do not interfere.

I would highly recommend you take a look at CSS frameworks or approaches that use grid layout schemes such as Nicole Sullivan's OOCSS framework .

You will find that a structure (which has a lot of good, workable examples) is easy to track and much easier to mock up to that you are trying to achieve.

Answer 2

I hope this will be helpful.

Here is a very simple layout that you can use.

In your CSS:

  #header, #content, #comments{ margin: 0 auto; width: 960px; overflow: hidden; } #author-comments{ width: 100%; } #comment-box{ float: left; width: 50%; } #comment-list{ float: right; width: 50%; } 

In your markup:

 <div id="header"> Header </div> <div id="content"> Contents <div> <div id="comments"> <div id="author-comments"> Author comments </div> <div id="comment-box"> Comment box </div> <div id="comment-list"> Comment list </div> </div> 

It is very important that you use markup that makes sense without styles. Do not consider divs as simple fields, but as real content containers that provide structure to your document.

On the side of the note, you mentioned that you are worried about the number of divs to save your file, compensating for the number of images you use. Do not worry about it. Text documents (such as HTML) are no different from images in terms of file size. However, it does not mean that you should drop the markup as if it were free;)

Last thing. I noticed that you are using <img> elements to render your jewelry. Try using CSS to set them as background images in their respective <div> s. This will not only help you simplify and simplify the implementation of structures, but also draw a line between the images representing the content and those that represent the decoration.

Answer 3

Without any testing, I will write how I will encode the layout on your image:

HTML:

 <div id="header" class="centered"></div> <div id="content" class="centered"> <div id="navigation"></div> <div id="content"></div> </div> <div id="comments" class="centered"> <div id="author-comments" class="centered"></div> <div class="centered"> <div id="comment-field"></div> <div id="user-comments"></div> </div> </div> 

CSS

 * { margin:0px; padding:0px } html { height:100% } body { height:100% } .centered { position:relative; margin:0 auto; width:960px } #header { height:100px; background:#333 } #content { overflow:hidden } #author-comment { overflow:hidden; margin:30px auto } #comment-field { position:relative; float:left; width:480px; overflow:hidden } #user-comments { position:relative; float:left; width:480px; overflow:hidden } 

Sorry, I don’t have time to test, but at the first viewing I don’t see any problems with this code - they write comments if something does not work