3 replies [Last post]
sidhu688
sidhu688's picture
Offline
newbie
Last seen: 5 years 33 weeks ago
Timezone: GMT-4
Joined: 2014-04-18
Posts: 1
Points: 2

I have the below HTML in this fiddle http://jsfiddle.net/v6E9a/ .The issue is that the footer is overlapping with the body.If I change the body position to relative then it all lines up correctly but I need to have absolute there to support some other functionality.

I m really not that good with CSS.Can someone please have a look at the html and tell me how i can line the head body and footer correctly.

<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
    <div id="s4-bodyContainer" style="position:relative">   
 
        <div class="headerSection" style="position:relative ;border : 3px solid red">           
            <div class="globalHeader">  
                header
            </div>
        </div>  
        <div>          
            <div id="contentRow" style="position:relative">
                <div class="fixedWidthMain" style="position:relative">   
                         <div class="fixedWidthMain" style="position:absolute ;border:3px solid blue">   
                         main data
                </div>           
                </div>
            </div>
        </div>
    </div>
 
    <!--PAGE FOOTER SECTION-->
    <div class="pageFooterSection" style="clear: both;position:relative ;border:3px solid green">      
  footer
    </div>  
    </div>

`gt/mod
//mod edit: [code][/code] bbcode tags added around the source code.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 1 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Not a good start

Using the position property to create the desired layout is almost never a working method. If you think using position will solve your problem, you now have two problems.

I don't know where to start, because 1) I have no idea how you expect the document to look, 2) you have no proper markup of 3) a complete lack of specimen content.

I suggest you discard what you have and start over. Begin by writing a document with a plain text editor as if you're using an old typewriter. After writing this document using typical (even if dummy1) content, mark each structural bit with the proper html tags. Do not use any attribute on those tags, just leave them bare nekkid. Do not use any div or span tags; they are non-semantic and are used only for css and js hooks. This should give you a working web page. It may not be pretty, but it should be functional.

Only now that you have marked up content do you begin to figure out how to present it. Make a quick sketch of where you want the various blocks of content to live on your page. Post that sketch, made with whichever drawing/paint application you prefer. We can the direct you towards properly using the power of Cascading Style Sheets to lay out your page and give it eye appeal.

If you try to work on "design" before you have marked up content, you will nearly always fail.

cheers,

gary

1: See Lorem Ipsum

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I have played a little with

I have played a little with your HTML code and entered a CSS file.
Maybe this is something you want, and made them absolute as you wished.

Negative part on this one (as Garry already mentioned), you need to align them with top, bottom, left and right now. You can take a look here.

Cheers, Henk

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 1 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Another example

Were it me, I see no value in using the position property here. Without compelling reason otherwise, position should not be used, nor its related properties, top, right, bottom, and left.

Instead, do this:

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test Doc</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: white;
    color: black;
    font: normal 100%/1.25 sans-serif;
    margin: 0;
    padding: 1.25em;
    }
 
  p {
    font-size: 1em;
    }
 
  h1,
  h2 {
    font-family: serif;
    margin-bottom: 0;
    }
 
  h1+p,
  h2+p {
    margin-top: 0;
    }
 
  hr {
    display: none;
    }
 
  div {
    margin: 1.25em;
    padding: 0 1.25em;
    }
 
  #wrapper {
    border: 1px dotted black;
    margin: 0 auto;
    max-width: 40em; /*so lines of text don't get
                       too long to read easily*/
    padding: 0;
    width: 95%;
    }
 
  #banner {
    border: 2px solid #800;
    }
 
  #content {
    border: 2px solid #080;
    }
 
  #footer {
    border: 2px solid #008;
    }
 
  #footer p {
    font-size: .9em;
    font-style: italic;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="wrapper">
    <div id="banner">
      <h1>Page heading</h1>
 
      <p>You can put other things here, like a logo and your global
      navigation.</p>
    </div>
 
    <div id="content">
      <h2>Main content container</h2>
 
      <p>In porta vel nibh vel vestibulum. Suspendisse at dolor at ligula
      mattis lacinia! Nullam tempus placerat lacus ut ornare. Integer semper
      mauris eget quam ullamcorper, nec placerat ipsum tempor. Duis.</p>
    </div>
    <hr>
 
    <div id="footer">
      <p>Since there is no heading for this section of the document, a hr
      element precedes it to to tell users of assistive and non-graphic UAs of
      the change. For users of graphic UAs, you can make the hr /code/{display:
      none;}//code/, as I&#39;ve done here.</p>
 
      <p>In the previous paragraph, I used the html code tag to mark the CSS used.
      This forum recognizes that as equivalent to the bbcode version, so I 
      replaced the the angle brackets with "/".</p>
    </div>
  </div>
</body>
</html>

Note that no positioning is required. Separation between sections is done with margins. Turn styles off or use a text-only browser to see the effect of having the hr element. Also see the use of semantic markup for real(ish) content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.