Positioning trouble


#1

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;


#2

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.


#3

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!


#4

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.


#5

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?)


#6

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).


#7

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