CODEWITHSUNDEEP
html
tekman22
tekman22

Reputation: 233

Getting HTML Body to extend with text

so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:

  1. The body won't extend downward as I add more text
  2. The footer isn't displaying at all at this point
  3. There are some weird symbols being inserted into the document
  4. The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)

Here's the jFiddle: http://jsfiddle.net/9nYgb/

Any help is appreciated greatly, thank you!

Upvotes: 0

Views: 68

Answers (2)

Surreal Dreams
Surreal Dreams

Reputation: 26380

When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.

In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).

In general I don't find much need for absolute positioning in a page layout.

Upvotes: 0

Kaustubh Karkare
Kaustubh Karkare

Reputation: 1101

Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.

Upvotes: 2

Related Questions