Mon, 2017-07-31 17:46
I'm reasonably happy with my page at https://www.dataperceptions.co.uk, it validates OK and renders as intended... Except on very wide browser windows, where the div "maincontent" vertically overlaps the keyboard.jpg image.
In fact, if you manually expand and contract the browser window width you can see the "maincontent" div slide up and down relative to the bottom of the keyboard.jpg img element.
I'm not terribly proud of the mix of bootstrap and inline css in the page but apart from this problem the page does work. I've tried really, really hard to work out why the overlap is happening on wide screens but unfortunately I have been unable to work out what's causing it.
Please can someone suggest a solution? Thank you so much - it would be very helpful indeed!
Pete
Mon, 2017-07-31 21:14
#1
Bootcrap? Use a stick and scrape it off
It appears to break at about 1240px width. Simply constrain your page width to something smaller, e.g. put a wrapper div around the entire content and set max-width to, say, 1200px. Set the wrapper div's {margin: 0 auto;} to keep it centered.
That will improve readability, too, as lines of text won't get so long.
gary
ps, Once you get around to scraping the Bootcrap off, don't step in it again. ~g
Tue, 2017-08-01 10:37
#2
gary.turner wrote: It
It appears to break at about 1240px width. Simply constrain your page width to something smaller, e.g. put a wrapper div around the entire content and set max-width to, say, 1200px. Set the wrapper div's {margin: 0 auto;} to keep it centered.
That will improve readability, too, as lines of text won't get so long.
gary
ps, Once you get around to scraping the Bootcrap off, don't step in it again. ~g
Hi Gary,
Many thanks for the reply and suggestion. I really should have thought of that one myself! 
But... I've tried it (I think!) but, unfortunately, it's causing even worse relative positioning conflicts!
I think my (lack of) css skills are probably as much to do with the problem as Bootcrap! However, I totally take your point and maybe the best solution is for me to don my learning hat and attempt to roll my own rendition of the page. As you can tell, web design/css is not my main activity so each time I need to re-learn. I find css positioning somewhat difficult to master.
Many thanks for taking the trouble to respond!
All the best,
Pete