Content Div separating from header, Please help!
Alright I have a simple header/content/footer css layout that i have used on other sites and worked fine. But for some reason this time while using it in a site to be made in HTML5 it isnt working quite right. When i just have the layout setup with no text or content it looks fine, the header, content, and footer areas bump up agaisnt each other like they should with no space between them. But as soon as i go into the content div(id="body" in my css) and put a <p>(paragraph) in with some text, it makes the content section including the background image move down creating a space between it and the header? I dont know what to do... Below is my CSS and Html.
Heres the URL to the page, youll notice the space above the white content area that shows when i enter any text using a tag such as <p> or <h1>
/* Height of the footer */
height:60px; /* Height of the footer */
Last edited by jasonhr13; 06-03-2011 at 11:48 AM.
it's because the <p> in your body section has a top and bottom margin of 16 pixels. That's what's pushing it lower. It's always a good idea to use a CSS reset to remove margin, padding, and other styling that browsers apply differently. This way you can start from a common, clean slate before applying your styling.
Well when i do that and add that to my css, it still doesnt work. The point isnt the margins used by the <p> tag, The point is that i should be able to position that div in that spot, then have it not move down when i put in a paragraph.
Using that reset now when i enter my text it just puts it in that space between my header and body, thousands and thousands of websites use this simple layout. There must be a simple fix that im missing or just dont know about
the whole content div shouldnt move down when i input a paragraph, thats my point.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)