Positioning trouble


When doing this the header lands on top of the text, why does this happen & how do I fix it?

		<div id="header">Hi </div>
		<p class="none">Hey, how'd <b>you</b> get here?</p>

div#header {
    background-color: #55FF00;
    height: 60px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    border-radius: 0px 0px 15px 15px;
    color: #00D5FF;
    text-align: center;
    font-family: Impact;
    Font-size: 50px;
    background: linear-gradient(to right, #bfff00, #00ff4d);

p {
	font-size: 2em;
	font-family: Verdana,Cursive;
	float: top;


position: absolute; puts the element, div on a new "layer", so p moves up in the bottom "layer" because there is no longer a block element or element in that bottom layer on top of p. Just get rid of position: absolute; and it should be fine.
If you want the position:absolute to be there, just add an empty div above p with float left, a width that is the same as the header div, and a height. You can see the example here: https://jsfiddle.net/me2znz36/5/

Also, you don't need to have class: none if the element doesn't have/need one. Just remove it as the CSS is already targeting p without it.


Thank you for awnsering

I thought that this indeed would be a workaround for this problem, kinda feels like a hack to me though, because it doesnt really fix anything and has to be done in every case specificly.

I understand that the class none wasn't needed, I added the header to some old code when it started overlapping what already was there, back when I made that I wasn't very experienced yet, that's why the class none is there, thank you for mentioning it though!


Then you probably don't need the absolute position. It takes the element out of the document flow and I don't see a reason to have it. You can always play around with float, margin, and padding. I find positions to be a little unpredictable at times and a last resort kind of thing.

I've mainly coded e-mails so styles and workarounds are different haha. It might be more of a hack for websites/browsers. I'm not too sure.


I used the absolute to make the header into a real header, by making it go all the way across the page & stick to the edges of the page, are you saying there is a better way of doing this (if yes, please say so! Im always happy to learn new things!)

& the floater you added, you made it have a width of 30px, was this just a random try or something you figured out through trial & error or how'd you get to this number? I of course understand that it wouldn't be larger than the header itself but I dont fully see why it should be exactly 30px, and not 40 or 20.
One last thing, inside the div you added a &nbsp, what is this and why did you add this? I've only once before seen the & sign been used in coding, and that was to add a < in a way that the html doc wouldnt c it as an instruction. (or is this nbsp used to give this 'empty' div a solid property, so even though it's empty it won't be ignored?)


Making width : 100% and margin: 0 auto should do the trick if you didn't set any width for the <body>.
I made the floater with a height of 30px as width would be the same as the header. You can adjust the height of it as it just moves the <p> contents up or down. &nbdp; is non-breakable space and is used to add spaces to contents and elements. You can remove it and it won't affect anything. I used it because it was necessary to have those for empty tables (so cells don't collapse) and e-mails (out of habit haha).


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.