CODEWITHSUNDEEP
htmlcssresponsive-design
tanbox
tanbox

Reputation: 15

Text overlapping responsive image border

I made this page with fixed header, footer and a middle section where a large image always adjusts to the size of the window. If there was enough room, I was trying to have the image description, a couple of buttons and another small image on the right side of the large image. If not enough room, then I wanted these items to drop below the large image all at ones. I was able to achieve it by creating a table containing the items and placing it after the large image in my code. I have 200px min-width set for the table just so it doesn’t get too skinny. My problem happens when the table drops below. The text in it overlaps the border of the large image and I would like to avoid it. Simplest solution was to add "br" tag in front of the description text, but I don’t like the way it looks when the table is displayed on the right, so that doesn’t work for me. Perhaps there is a better way to do this all together. By the way, the border on the large image is made up by using margin and padding, not an actual border. I tried doing it with the border and had the same issue.

Here is the JSFiddle of everything I have so far. Please move the side border to make it wider/skinnier to see how the page responds. Thanks for your help.

HTML

<!DOCTYPE html>

<html lang="en">

<body>

<div id="header">Header</div>

<div id="main">

<img src="http://s33.postimg.org/5dvnxclpr/tmto1.jpg" id="photo">

<table>
<tr>
<td>
Description Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text
</td>
<tr>
<td>
    <ul>
        <li>
            <a href="">Prev</a>
        </li>
        <li>
            <a href="">Next</a>
        </li>
        <li>
            <a href="">Zoom</a>
        </li>
    </ul>
</td>
<tr>
<td>
<img src="http://s33.postimg.org/8fdpz710v/tmto2.jpg" id="nextphoto">
</td>
</table>

</div>

<div id="footer">Footer</div>

</body>

</html>

CSS

body {
  background: #f0ceb5;
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #000000;
}

img {
  border: 0px;
}

#header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

#main {
  position: fixed;
  top: 60px;
  bottom: 30px;
  left: 20px;
  right: 20px;
  padding: 10px;
  overflow-y: auto;
}

#photo {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  float: left;
  background: #d0a382;
  padding: 10px;
  margin: -10px;
  margin-right: 10px;
}

table {
  margin: 0px;
  padding: 0px;
  min-width: 200px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

ul li a {
  display: block;
  position: relative;
  float: left;
  padding: 10px;
  white-space: nowrap;
  margin: 10px;
  margin-left: 0px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #ffffff;
  background: #d0a382;
}

#nextphoto {
  margin-top: 10px;
}

#footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 30px;
  line-height: 30px;
}

EDIT:

It seemed like margin: -10px 10px 0px -10px; was the solution, but it looks like I still have a bit of an issue. I didn’t notice it until now because I was browsing using Firefox and that’s the only browser that doesn’t seem to have this issue. However I just checked Chrome, IE, Opera and they have a problem. This happens when I use large image that fills all of the height between the header and the footer and the table is displayed to the right of it. I’ve used margin: -10px 10px 0px -10px; on the large image. There is a space below the large image that’s causing a vertical scroll bar to appear when it’s not needed yet. I have it set to appear when necessary on the #main div. However in this case it’s that little space below the large image that makes it appear prematurely. The Firefox somehow knows to ignore that space and doesn’t show the scroll bar, but all other browsers do and it makes the page look not so great without reason. Please see this JSFiddle and make sure to widen the window so the table moves to the right of the large image. If you can, please check the way it looks in Firefox vs. other browsers and let me know if you have the same issue. Is there a way to get rid of that little space below the large image? The only way I know is to use -10px margin at the bottom, but that brings us right back to the original problem.

Upvotes: 1

Views: 1812

Answers (4)

milfred
milfred

Reputation: 21

You've made a valiant effort at bending this page to your will, but I think it would be helpful to go through some tutorials on CSS positioning and HTML best practices. This is a pretty good introduction to CSS layout. http://learnlayout.com/

I'm by no means an expert, but here's an example of how I'd approach this layout.

CodePen Example

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" media="screen">
  </head>

  <body>
    <div class="wrapper">
      <header>
        <h1>Header</h1>
      </header>

      <main>
        <section class="left-column">
          <img class="full-image" src="http://s33.postimg.org/5dvnxclpr/tmto1.jpg">
        </section>

        <section class="right-column">
          <p>
            Description Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text Text Description Text Description Text
          </p>
          <ul>
            <li><a href="">Prev</a></li>
            <li><a href="">Next</a></li>
            <li><a href="">Zoom</a></li>
          </ul>
          <img src="http://s33.postimg.org/8fdpz710v/tmto2.jpg" id="nextphoto">
        </section>
      </main>
      <footer><h3>Footer</h3></footer>
    </div>
  </body>
</html>

CSS

body {
  background-color: #f0ceb5;
}

p {
  margin: 0;
}    

a {
  font-family: Arial, sans-serif;
}    

ul {
  margin: 20px 0;
  padding: 0;
}

ul li {
  display: inline;
  list-style: none;
  margin-right: 5px;
}
ul li:last-child {
  margin-right: 0;
}

ul li a {
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background: #d0a382;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
}

.left-column, .right-column {
  display: inline-block;
}
.left-column {
  width: 60%;
  margin-right: 5%;
  vertical-align: top;
}
.right-column {
  width: 33%;
}

.full-image {
  max-width: 100%;
  border: 10px solid #d0a382;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  .left-column, .right-column {
    display: block;
    width: 100%;
  }
  .left-column {
    margin-right: 0;
  }
  .right-column {
    margin-top: 25px;
  }
}

Upvotes: 1

blurfus
blurfus

Reputation: 14031

You negative margin is bringing the text up and allowing the following text to overlap the image's border.

Change the margin attribute to this: margin: -10px 10px 0 -10px; (top, right, bottom, left)

See updated fiddle

Upvotes: 0

poashoas
poashoas

Reputation: 1894

Remove float: left or add margin-bottom: 10px from #photo

Upvotes: 0

Phillip Chan
Phillip Chan

Reputation: 993

The culprit is that you've added a negative margin all around the photo so that when it collapses, it's giving it a -10px margin to the bottom, thus forcing the text overlap.

Your code:

#photo {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  float: left;
  background: #d0a382;
  padding: 10px;

  /* this is your culprit */
  /* margin: -10px; */

  margin-right: 10px;
}

The margin property accepts 4 parameters (top, right, bottom, left) or 1 do all of them. If you wanted to target a side, use the correct syntax.

E.g.

margin: 0 10px;

See: http://www.w3schools.com/css/css_margin.asp

Upvotes: 1

Related Questions