CSS randomly edited my test page and i cant fix it.

[SnakesBite101]

i was making a test blog site and it was fine. i was even planning to post it here when i finished but oh well. anyway.. for each blog entry i had it... lets say similar(not really) to posts/comments on this forum. like if you look at my current post, at the start(top) where it writes my name, you see its a light bluish colour(div.blogheader). then the content of my post is grey(div.blogs) <-- it was also the main container for each blog entry, so the blogheader went inside of it. for a new blog entry i made a new div.blog and header etc.. my problem is that, when i made my div.blogheader(background-color:black;), it was the 1st element inside its div.blogs container (background-color:grey.) so naturally it started at the very top position covering the background colour of its container. just like the heading of my current post in light blue being at the very top of the post. i closed the header</div> and put my content(text) in the original div.blog container. everything was fine, it was perfect, ive had it like this for days. studied some Jscript. suddenly today: it randomly has lowered or given quite a lot of padding-top to my (div.blogheader). so the header no longer starts right after its container at the top, say top:0; it now starts further down, and the white background color of its container is now visible at the top before the header. to be honest i dont know if the header was lowered, because the height of the header has shrunk, its like its still there but the top part of its container has been placed infront. the header text has magically ratained its padding to be visible in its smaller header container. i didnt touch this file, i didnt edit it. infact, i had 2 separate copies of the same html file of this site. why have they both randomly changed my settings? and all the code ive used to try and fix it doesnt even have any effect. its like there's a barrier preventing my div.header from moving upwards. is there an explaination for what has happened? thanks:(

Edited June 13, 2012 by SnakesBite101

[niche]

It's best to post the relevant code so we can help you. That way we don't have to guess. EDIT: Code is always more to the point than prose.

Edited June 13, 2012 by niche

[SnakesBite101]

CSS in head div.blogs{width:100%;margin-left:18px;margin-top:20px;margin-bottom:20px;background-color:grey;border:1px solid black;}.blogs img{width:150px;float:right;margin:10px 16px 5px 10px;border:1px solid black;}.blogs p{padding-left:10px;padding-right:15px;} div.blogheading{width:100%;height:60px;background-color:black;}.blogheading h1 {color:white;padding-left:10px;padding-top:9px;} HTML in body <div class="blogs"><div class="blogheading"><h1> some text </h1></div><img src="paul.jpg" style="border:0 solid"/><p> blog content </p></div> sorry my css is not typed out nicely, im working on it:(

[niche]

OK. I have it loaded. Please say again what you want it to do.

[SnakesBite101]

hey please for reference keep looking at how the posts are displayed in this forum. imagaine our names are the blogheading <div class="blogheading"> and our text is the container <div class="blogs"> where we put our heading inside. please look at yours or my post to see if you follow. if you look at my html code, when the page opened the blogheading and its container was directly at the top postion inside <div class="blogs"> . i didnt have to put any positions etc, just like how our names in our posts are at the top. now suddenly, imagine blogheading or your name(blue background) at the top of your post suddenly moves down to where it says dedicated member or newbie. so instead of it being blue, grey, it is now grey, blue grey. the blodheading div has moved down, and its grey container is now visible at the top. im trying to get the blue blogheading back to the top, but its not responding. this repositioning happened by itself. i had'nt touched the page in a few days. if you need me to post my page i guess i can even though i wanted to post it here when it was finished:(

Edited June 13, 2012 by SnakesBite101

[niche]

Here's what you need to do for the answer you need. Use margin to set all your margins for simplicity. http://www.w3schools.../css_margin.asp ...and use float consistently. Remember, if an element's out of the flow, it won't be where you need it.

Edited June 13, 2012 by niche

[SnakesBite101]

Here's what you need to do for the answer you need. Use margin to set all your margins for simplicity. http://www.w3schools.../css_margin.asp ...and use float consistently. Remember, if an element's out of the flow, it won't be where you need it.

ok i will give it a shot. i previously played around with margin to try and solve but i havent tried the float method. not great with float. any ideas why the page randomly changed? i had 2 separate files of the same page and both .html files have been affected yet the code is the same. could it be browser settings? Edited June 13, 2012 by SnakesBite101

[niche]

OK. Remember almost nothing randomly happens in code. If you're going to position with float, generally, everything has to be floated or has to inherit its float.