Hi
One more problem, I’m afraid. Hopefully, the last on this page!
I am trying to move the bottom section (#box9) of my index page up into another position, below the globe. I thought it would be a simple matter of cut and paste, but the div does not show up anywhere.
I am testing in http://pintotours.net/Work/dec.html
Hope you can help
Thank you
Hi ,
I need to see the attributes of the div and also the page . First of all check the div under which you are placing the new div and then check all of its attributes . Suppose you are moving div id=“2” and where you have moved suppose this is under div id=“1” . Since this is going under “1” , it is not showing , bring it out it will come again .
I’ve now amended the post above to include the current version where #box9 is at the bottom with a light blue background.
In the testing page I moved the code below the globe and cannot see why it does not show. I’ve even tried z-indexes to make sure, and it just disappeared
I wonder if this is connected with the expansion script that shows and “hides” text… scripts are Chinese to me!
Hi, the test page is 404, but here is what I noticed. I moved #box9 right below the globe (so after #middle) and I saw it not appearing. Well your two columns of text is actually overlapping it. Now why is that? Why would it not be below the text?
You don’t give coordinates to the two columns of text, and instead rely on the browsers to guess where it should be placed. The #box9 is floated so thus taken out of the flow of the page. So the browser is guessing that it should go where #box9 actually is. Remove the float on #box9 and you’ll see the browser correctly guess that it’s not supposed to go on top of it.
Alternatively you should really specify coordinates on the text but removing the float will work too.
Hi Ryan
You’re a genius! Even without seeing the page…
Sorry the url has now been amended above.
Right, now I have to try and place the box9 esxactly where I want it… I guess I should be able to do that.
many thanks
Well I had your original page (just not your test page with your attempt.) So definitely not in the dark - I just had to manually do the test on my end.
You’re welcome.
Hi
Still problems… The globe above is taking up space underneath and covering the top of box9. I’ve tried a high z-index for box9 just in case but that does not do anything. None of the divs above has bottom-padding or margin to cause this… So, what?
Also, I don’t seem to be able to center box9. I’ve played with margin and padding to no avail
This page is set up extremely weird. No offense.
Without doing a major overhaul of your CSS, you can simply add
#box9{margin-top:50px!important;}
The 50px is because the globe / elsewhere on that same column you seem to push everything down 50px (e.g. top:50px) and if every element has that, then you need to give it to #box9 too otherwise you get the overlap.
Again, I’d redo your CSS because it’s set up extremely odd right now.
The !important is to override the specificity on “#expansion div”. You can redo your #box9 CSS to make it more specific if you want. Your call.
Hi
It’s getting there! But still too far down from the globe.
You can give #box9 position:relative and adjust the top margin to a lower value to bring it higher up.
Great Ryan
It’s all worked fine. Now for the media queries… but not today!
Many thanks
One tiny little thing more…
I had a border in box9 when it was at the bottom. Now with the same code the border is no longer there. if I try to put the code in #box9 p{ I get a very thick line below the text rather than the blue area.
Help…
You do give a border on #box9 but as said previously, anything on “#expansion div” will override #box9 due to laws of specificity. Look at “#expansion div”. There is a border:0; rule. So either remove that (divs dont come with borders/margins/paddings to begin with so I dunno why you have that) or add !important OR make the #box9 rule more specific.
Perfect! Thanks
I’ll give you some time off, now. Promise!
Regards
Hi Ryan
I hope you’re still around. I have a problem with the page. It works ok when I narrow the screen and the media kicks in. But now I had a look at the real thing in my daughter’s phone and the globe is not there…
I can’t understand why.
The page is now live as pintotours.net
What phone? I narrow it in my browser (to mobile size) and it appears fine. Give me the phone and I’ll load it up in browserstack to confirm if it’s an actual issue.
Yup I have no life.
Hi Ryan
It works fine in an iPod and another phone both of which respond to max-width 300px.
the globe does not show up in my daughter’s phone, which means that either there is omething wrong with max.
-width 500px, or ,worse still, I have to buy her a new phone!
In fact, the only thing I still hadn’t done and was leaving for tomorrow is that in the mobile widths the blue colour background of the text below the globe, does not appear.
UPDATE: My daughter shouted that it is ok now!!! Uhffff…
She might not have waited for the page to fully load before crying wolf. Glad it’s ok though. Guess you don’t have to buy her the new phone 
.
Any idea why the blue background is not showing? Just being lazy…
Let’s look at your media query. You tell me why it’s white instead of blue 
@media screen and (max-width: 500px)
#box9 {
float:left;
width:auto;
height:auto;
margin-top:20px;
padding:30px 20px 0 20px;
background:#fff;
}