tanbox tanbox - 6 months ago 34
CSS Question

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;
}

Answer

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

Comments