2 replies [Last post]
pete99
pete99's picture
Offline
newbie
Amersham, UK
Last seen: 2 years 35 weeks ago
Amersham, UK
Timezone: GMT+1
Joined: 2017-07-31
Posts: 2
Points: 3

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 23 hours 2 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Bootcrap? Use a stick and scrape it off

Tongue

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

pete99
pete99's picture
Offline
newbie
Amersham, UK
Last seen: 2 years 35 weeks ago
Amersham, UK
Timezone: GMT+1
Joined: 2017-07-31
Posts: 2
Points: 3

gary.turner wrote: It

gary.turner wrote:

Tongue

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! Puzzled

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