Display issue: right content cont bleeds over onto left column on mobile

Question

My problem is that on mobile, the right cont (white background) goes underneath the left cont (purple). I have tried using clear:both and it still didn't fix it.

I keep thinking this CSS is wrong:

.cont {
    width: 1000px;
    overflow: hidden
}
.cont_left {
    width: 283px;
    height: auto;
    float: left;
    vertical-align: central;
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;
    background-image: url(.//images/sidebar.png);
    padding-bottom: 220px;
}
.cont_right {
    width: 600px;
    padding-left: 25px;
    height: 100%;
    float: left;
    position:relative;
    font: Arial;
    font-size: 12px;
    background: #ffffff;
    padding-right: 25px;
}

Live site: Website

Image of problem: iOS Screenshot

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

Maybe you are looking for the Faux Columns technique, which has been discussed here. Also, Geoff Graham has written a pretty well covered article about spliting your layout in half (but of course, you don't need to go 50 50 as described).

In your case, I'd go with percentages (70% for the content, 30% for the side bar), using one of the techniques mentioned above. And be careful, as vertical-align: central; is not a valid property. Here you can find some info about how to center stuff vertically.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 18 '15 at 12:57

Caio Felipe Pereira

805
11
14

Thanks for the links/tips. – jenglish Mar 18 '15 at 14:30
Anytime. Just remember to upvote if the answer has helped you in anyway. – Caio Felipe Pereira Mar 18 '15 at 14:33

score 0 · Answer 2 · answered Mar 18 '15 at 12:46

0

so its just the css for the left side is wrong. you have got the bg image on repeat. the top part of the image repeated is white so it looks like the right side is bleeding over....

.cont_left {
  background-color: #23265d !important;
  background-image: url(".//images/sidebar.png");
  background-position: left top;
  background-repeat: no-repeat;
  float: left;
  height: auto;
  padding: 25px 25px 220px;
  width: 283px;
}

this will fix it

answered Mar 18 '15 at 12:46

Abdul Samad

109
6

This unfortunately hasn't fixed it. I have updated the live website with this CSS and still have problems with mobile. – jenglish Mar 18 '15 at 14:30
perhaps clear your phone browser cache. the purple goes all the way to the bottom. – Abdul Samad Mar 19 '15 at 01:21
May I ask what phone/browser? I am looking from an iPhone 5s - Chrome browser. – jenglish Mar 20 '15 at 13:16
Safari n chrome in Samsung s5 – Abdul Samad Mar 21 '15 at 16:35

Display issue: right content cont bleeds over onto left column on mobile

2 Answers2