html - Two Column Layout with heavy technical restrictions -
i have work cms not have access stylesheets. internal css commands in sense of style="width:200px" being filtered cms , hence cannot used, neither.
the editor not allow add align="left" images. neither can add manually through source code view.
what want achieve: 2 column design - images left, text right (see wireframe). 
given restrictions above, option see achieving using tables image , text positioning. problem is: (for me not editable) theme has following css attributes img tag:
max-width: 100%; height: auto; causing images shrink in safari depending on amount of text in adjacent cells... firefox works fine.
does have clue do?
i suppose removing max-width: 100%; easiest solution. there solution avoid changes stylesheet (since not have access it)?
if have absolutely no other choice
old school table layout obsolete attributes
disclaimer: in no way endorse tables layouts; meant tabular data. answer purely given purposes of demonstrating work around within limitations laid out in question.
styling table
basically, go mdn documentation on <table> , use obsolete attributes tells not use:
- valign - vertical alignment in cells
- cellpadding - padding in cells
- cellspacing - gaps between cells
- bgcolor - background color
- width
- height
- border
(this feels dirty, many memories)
the <colgroup> , <col> elements help. still in current html spec well, nice :)
hell, let's go crazy , center <center> (eww!). need work have.
reset image width
so discussed in comments, found archaic cms allows style attribute on image element. use max-width value override 100% value set in stylesheet:
style="max-width: 1000px; width: 134px;" let's kick old school!
img { max-width: 100%; height: auto; }<center> <table cellpadding="5"> <tr> <td> <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;"> </td> <td> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem. </p> <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod quam ullamcorper.</p> </td> </tr> <tr> <td> <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;"> </td> <td> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem. </p> <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod quam ullamcorper.</p> </td> </tr> </table> </center>so how can give table width?
did spacer.gif?!
yes! in 2002!
this horrible, might work right combination of css width / max-width
img { max-width: 100%; height: auto; }<img src="http://www.placehold.it/500/ffffff" style="max-width: 500px;width: 20%; height: 1000px; float: right;" /> <img src="http://www.placehold.it/500/ffffff" style="max-width: 500px;width: 20%; height: 1000px; float: left;" /> <table cellpadding="5"> <tr> <td> <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;"> </td> <td> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem. </p> <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod quam ullamcorper.</p> </td> </tr> <tr> <td> <img src="http://www.placehold.it/100" style="max-width: 1000px; width: 134px;"> </td> <td> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in faucibus gravida venenatis. nam nisl sem, fringilla vel tempor id, congue erat. fusce venenatis dapibus purus ac hendrerit. morbi in ullamcorper ligula, in varius lorem. </p> <p>donec consectetur faucibus vehicula. nulla semper facilisis nisi vel faucibus. sed posuere id nibh eu finibus. in id nunc non diam laoreet efficitur vel vel ligula. nam vitae sollicitudin mi. phasellus dapibus sem non nisl volutpat, vitae euismod quam ullamcorper.</p> </td> </tr> </table>
Comments
Post a Comment