The code below, when I view this on a HTML editor and preview this in a web browser, both images are on the left hand side and top of one another. I want to put one image on right and one on the left with the text Help us improve how we serve the community in the center. How would I achieve this?
i.e.
"IMAGE1" Help us improve how we serve the community "IMAGE2"
<div class="survey-title">
<table>
<tbody>
<tr align="right">
<td style="width: 40px !important;">
<div id="uploadImage">
<img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo1" title="Logo1">
</div>
</td>
</tr>
<tr align="right">
<td style="width: 40px !important;">
<div id="uploadImage">
<span style="float:left;"></span>
<img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo2" title="Logo2">
<td>
<div type="text" id="survey-name" class="survey-name survey-headers survey-name-image" placeholder="Untitled Survey" disabled="true" title="Help us improve how we serve the best community" aria-label="Help us improve how we serve the community">Help us improve how we serve the community</div>
</td>
</tr>
</tbody>
</table>
</div>
You have to use 3 tds inside a single tr.
Just like this example:
<div class="survey-title">
<table>
<tbody>
<tr>
<td>
<div id="uploadImage">
<img id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo1" title="Logo1">
</div>
</td>
<td>
<div type="text" id="survey-name" class="survey-name survey-headers survey-name-image" placeholder="Untitled Survey" disabled="true" title="Help us improve how we serve the best community" aria-label="Help us improve how we serve the community">Help us improve how we serve the community</div>
</td>
<td>
<div id="uploadImage">
<img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo2" title="Logo2">
<td>
</tr>
</tbody>
</table>
</div>
As comments sugguest above, you shouldn't use tables for layouts unless developing an email template. However it is possible by using one table row and having the table cells in the order you require:
<div class="survey-title">
<table>
<tbody>
<tr align="right">
<td style="width: 40px !important;">
<div id="uploadImage">
<span style="float:left;"></span>
<img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo2" title="Logo2">
<td>
<div type="text" id="survey-name" class="survey-name survey-headers survey-name-image" placeholder="Untitled Survey" disabled="true" title="Help us improve how we serve the best community" aria-label="Help us improve how we serve the community">Help us improve how we serve the community</div>
</td>
<td style="width: 40px !important;">
<div id="uploadImage">
<img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo1" title="Logo1">
</div>
</td>
</tr>
</tbody>
</table>
</div>
Using Table
Tables are organized in rows tr, and inside of them we have cells td, for you to have the alignment you need, you only have to put the items in the right order insider a row; in this case that would be Image1 - Text - Image2, each of these would go in a td element inside the same tr element.
Unless you are creating an email template however, I'd not recommend using tables to create a layout.
<div class="survey-title">
<table>
<tbody>
<!-- Single tr element -->
<tr>
<!-- Image1 td element -->
<td style="width: 40px !important;">
<div id="uploadImage">
<img id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo1" title="Logo1">
</div>
</td>
<!-- Text td element -->
<td>
<div type="text" id="survey-name" class="survey-name survey-headers survey-name-image" placeholder="Untitled Survey" disabled="true" title="Help us improve how we serve the best community" aria-label="Help us improve how we serve the community">Help us improve how we serve the community</div>
</td>
<!-- Image2 td element -->
<td style="width: 40px !important;">
<div id="uploadImage">
<img id="imgPreview" src="data:image/jpeg;base64,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"
alt="Logo2" title="Logo2">
</div>
</tr>
</tbody>
</table>
</div>
Using Flexbox
I'd recommend using flexbox to align items in a single row that DO NOT require a table.
.container{
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<img src="data:image/jpeg;base64,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"
/>
<div>
Help us improve how we serve the community
</div>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAH0AawMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAwIEBQEGB//EADsQAAICAQEEBwQHBwUAAAAAAAECAAMEERIhMUEFE1FhcZGhIjJSgQYUFSNCYrEkU8HC0eHwMzRygpL/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A+4whCAQhCAQhCAQMDM7IufKufHocpUm661Tv1+Be/tPLx4A6/PqrsNNavdcONdQ2iPHkPmROUZlrZApyMfqiylk+8Da6aa66cOI7ZCsJRUK6ECIPwiJw/vulbG5U1hNfzNvPps+cDVhCEAhCEAhCEAhCLuvqoQvdYlaD8TsAPWAyEpfauBxGVWw7V3jzEdRl42Tr9Xvqt047Dg6QI9IXtj4rvWAbDoqA8CxOg9SIlUTFoShGJCjex4seJJ7ydTK30lOSuHW+IyrYlgbaZSwGgOmoAJ46cp5+rG6X6Rf9pvssB36Ipqr8z7R8NB4wNnJ6SrRuqo++vY7Kop3a955TU6MxTi44DttWMSzt2seMoYOFhdEKHyr6UsI01dgoHcAZe+1MLj13s/FsNs+emkC5CJx8rHyVLY91doHEo4OnlHQCEIQCEJUzrX9jHobS646BtNdhebfL9SIEbci261qMPQFDpZc29a+4Dm3dy59k7Tg0VWC11N1/7232m+XZ4DQRlNaUVLVSuyi8P7xkCWsrZOJRkkG6sMy+643Mvgw3j5R+phApGrMr9mrKSxOy+vaI+YI9dYDGusH7RlMF+DHXqx56lvIiXOMQ+SinZrHWOOIHAeJgFGNj45Jx6ERjxfTVm8TxMLchEOjWan4V3n0lexrH/wBR9B8Kbh58YvQKNFAA7oEcoJkMG6jZsHu2ltl18CN/rG4ebbU6U5r7YYgJcBpv7GHb2Hge48VFoixjkO2JSnWOw0cnhWDzPf2D59moehhI1ghADx03yUAmfjnrMrJyDybqU8BvPqfSX23AmZuCf2Ko/GWc/wDZiYFwToMgpkhAnIW2pSm3Y2g5d8Tl5aYwVQNu59yVjif7RVNTluuyW27j5J3CBJjZf75NdfwDifEzmgRdlQABwAk2aIdoEXaKZoO0SzQOXWsqfdgGwkKgPNjw+XP5TY6Ow0xMdUGpY72Y8WJ4k98zMevbysPUfHZ5AD+YzegEIQgRf3D4TKwP9ljjsTTy3TWbgZk4XspZXzrtdfM7Q9GEC4kR0jnpg1LqNu6w6VVjixncvLpwcSzJyDoiDXvPYB3zI6IrtzLm6UzRpZYPuU/dpy/z+sDQwcV0LZGU23k2e8fh7hLTNIlotngddpXdp13iLHgRd5XeydseV3aBsYz+1gW9jPUe7Ua/yzanmMB+srfFL7BbRqnP4XB1U+Ym/hZIyKQxGw4OzZWeKMOIP+bxvgWIQhAJlOOp6Tdfw3ptj/ku4+hHlNWZX0jovt6Otswjs5dSlqW79CP46QPN52T9v9P/AFGs7WBgNraeVlnZ+o+R7Z6NSFUAcBMD6L9HfZfRdVTENa46x3G/aLb+PhoPlNragNLxbNIlotmgcdoixpJzEtAW7axRMYYthA4CQdQdJpY+cxcW7SpkAAEt7toHJu/sPLvmUzaRmInW3AMdEX2nbsA3kwPW4eT9ZrLFCjKdllJB0OmvHnxliUeh0ZcTrHBVrWNhX4deA+Q0EvQCcYagg852EDz9lRxchsfT2Tq9J7uJX5cR3a9k4G3cZr9IYgyqdASti+0jjipHCYo2nLgrs3J/q1jl+Ydqn0gTJkW3wGhhugQIi2WWAjt7tZM4a347B0gU3XdEvLr1NpuGsrNTYx0VGJ8IFNjv0E1sLDPsYpGr2gPf+VOS/M+g75ynEGEEuvXrL23U0c2PaewDmZudG4hx6y1jbd9h2rX+I/07O6BbUBVAHATsIQCEIQCUs7AXIK21u1WQnuWJxEuwgYbpmo2l2Bj5H563NeviN8Pq/SGQNlKKMReba7beu79ZuQgY69AYr78prMhu2xtfTlJN9Hujxvpq6luTVHZPmJrQgYZwM/FcGi5MhB+C4b//AEP46xgfpNzs14eNQfjZy+ny0E2IQKOH0eKbGvvsa7Ib3rG/Qdg7pehCAQhCB//Z"
/>
</div>
Related
Looking to allocate most of the row space to line up with the container to the right column of a row. I've used
Column1
Column2
This seems to resolve the issue on some online HTML editors, but for some reason, it has no effect on the internal editor I'm using which is mainly focused on MarkDown / HTML / In-Line CSS
Is there a way that this can be done preferably using in-Line CSS?
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src="https://lh3.googleusercontent.com/coMv1dl31PCfEs6essJoEUwVryaqKHKQvENdZ_WYpN-PXa8Qfitkg3grQxIVN22W5A"
hspace="50" width="150" height="150">
</div>
<div class="content-container" style="width: 600px;">
<h3>Subject Title</h3>
<h4>Subject Description</h4>
<table>
<tr>
<td>
<p>
<center><span style="font-weight:bold">Sample Service</span></center>
</p>
</td>
<td>Sample Service Details Will be listed here!!!!!!!!!!!</td>
</tr>
<tr>
<td>
<p>
<center><span style="font-weight:bold">Contact Us</span></center>
</p>
</td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email Sample
</li>
<li><a>Skype: Sample Contact</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
Looking to have an image on the left side of a container, however, if the content is too short or too long I'd have to adjust the height of the image proportionally to prevent the content from sliding below the image. The reason I want to contain the Image and the content in the container is to ensure that the image is coherent throughout the entirety of the pages.
We can use HTML / in-line CSS / Markdown to make this adjustment. Perhaps I believe we may need to use Flexbox
I've attached the code below, I've used Grid and a table, and I don't really like it
<div style=“display:grid; grid-template-columns:auto 1fr”>
<div>
<h1> <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
align=“left”
hspace=“30"
width=“100”
height=“100">
</div>
<div>
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”><p>Updates are made annually or more frequently if needed<p/></td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</br>
</td>
</tr>
</table>
</div>
</div>
--Most Recent
The image is on the left side but the table seems to overlap the image
This is what it currently looks like
edit 2
I've edited this again for you if this needs to be inline styles, i've gave a class name on the different containers so you can clearly see how this is working,
your image can just go into image-container and your content can go in content-container. You can add size to the containers, padding, margin etc.. to adjust the layout that you want, but this should help with the basic setup for your HTML.
<div class="main-container" style="display: flex;">
<div class="image-container">
<img
src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
hspace="30" width="100" height="100">
</div>
<div class="content-container">
<h3>TITLE</h3>
<h4>Description for Title</h4>
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style="padding-left: 20px;">
<p>Updates are made annually or more frequently if needed</p>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><strong>Contact Us:</strong></td>
<td style="padding-left: 20px;">
<ul style="padding-left: 15px; margin: 0;">
<li style="padding-bottom: 10px;">
Email: Jane Doe
</li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
Here a flexbox example:
HTML
<div style="display: flex; flex-flow: row nowrap;">
<div style="flex: 1 auto;">
<img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg” hspace="30" width="100" height="100">
</div>
<div style="flex: 1 auto;">
<h3>TITLE</h3>
Description for Title
<table>
<tr>
<td><strong>BLAH:</strong></td>
<td style=“padding-left:20px”>
<p>Updates are made annually or more frequently if needed
<p />
</td>
</tr>
<tr>
<td style=“vertical-align:top”><strong>Contact Us:</strong></td>
<td style=“padding-left:20px”>
<ul style=“padding-left: 15px; margin: 0px”>
<li style=“padding-bottom: 10px”><a href=“mailto:sample#email.com”>Email: Jane Doe</a></li>
<li><a>Skype: Sample</a></li>
</ul>
</td>
</tr>
</table>
</div>
</div>
DEMO HERE
How would I go about aligning four images (two square images and two rectangular images) using a table? Should look something like this: http://imgur.com/a/PdbZq
<table>
<tr>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
</tr>
</table>
Doesn't make much sense to use a table for what you want does it? A table has equal size cells in an entire column - which is exactly what you don't want. One CSS solution:
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/B8jHVoB.png" />
<img src="http://i.imgur.com/SXEsKuc.png" />
</div>
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/SXEsKuc.png" />
<img src="http://i.imgur.com/B8jHVoB.png" />
</div>
Almost forgot: don't use an inline style, set a class to hold a row of images, with the white-space: no-wrap as an attribute.
I can get two divs next to each other using display: inline-block; in the style attribute, but then the div on the right side is aligned on the bottom rather than at the top. So I tried floating the divs and I get another issue...
If I use floats like so:
<div style="width:100%">
<div style="width:25%; float:left;">
<asp:HyperLink ID="hlPic" runat="server" Target="_blank" ToolTip="Click to open this picture.">
<asp:Image ID="imgPic" Width="256px" Height="256px" runat="server" ToolTip="Picture" />
</asp:HyperLink>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><asp:HyperLink ID="hlCGValue" runat="server" ToolTip="Go to this corporate group.">[hlCGValue]</asp:HyperLink></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<asp:Label ID="lblCompanyNameValue" runat="server"></asp:Label></h3>
<asp:Label ID="lblCompanyID" runat="server" Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:HyperLink ID="hlWebsiteValue" runat="server" Target="_blank">[hlWebsiteValue]</asp:HyperLink>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblAssignedToValue" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</div>
I get the following layout:
Notice the table with text is so far away from the picture...I'd like to move it right next to the picture. I tried doing it using display: inline-block but then the table of data would be next to the picture however it would sit at the bottom of the div rather then at the top (probably due to the size of the pic). If it helps the max size of the picture should only be 256px x 256px.
Can anyone help me with my CSS / HTML to make this look right...
Rendered html
<div style="width:100%">
<div style="width:25%; float:left;">
<a id="MainContent_hlPic" title="Click to open this picture." href="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" target="_blank"><img id="MainContent_imgPic" title="Picture" src="/Attachments/Pictures/56_27_11_2013_23_26_11_2013_Penguins.jpg" style="height:256px;width:256px;" /></a>
</div>
<div style="width:75%; float:right;">
<table style="width:100%">
<tr>
<td>
<h2 style="display:inline;"><a id="MainContent_hlCGValue" title="Go to this corporate group." href="../Corporate/Details.aspx?CorporateGroupID=39">Ford</a></h2>
</td>
</tr>
<tr>
<td>
<h3 style="display: inline;">
<span id="MainContent_lblCompanyNameValue">Ford Global Test Co.</span></h3>
</td>
</tr>
<tr>
<td>
<a id="MainContent_hlWebsiteValue" href="http://www.ford.com" target="_blank">www.ford.com</a>
</td>
</tr>
<tr>
<td>
<span id="MainContent_lblAssignedToValue">Name</span>
</td>
</tr>
</table>
</div>
</div>
You can use display: inline-block. When you want them aligned at the top, you must use vertical-align: top
<div>
<div id="#first">
<!-- image -->
</div>
<div id="second">
<!-- table -->
</div>
</div>
#first, #second {
display: inline-block;
vertical-align: top;
}
JSFiddle
The problem with display: inline-block is that the whitespace between your two div elements is NOT ignored. The result is that the width of your 2 divs + the width of the whitespace is more than 100%. That's why the second div appears under the first one.
One way to fix this is to set font-size: 0 on the parent element, but there are other solutions:
http://davidwalsh.name/remove-whitespace-inline-block
I have html script as below
<header>
<div id="header">
<table class="headertable">
<tr>
<td>
<table class="headertable">
<tr>
<td colspan="2">
<div id="site-title" class="site-title">
<img src="~/Images/site-title.gif" alt="site-title", title="site-title" id="img-site-title" style="display:block" />
</div>
</td>
</tr>
<tr>
<td>
<div id="fullbannerad" class="fullbannerad">
<img src="~/Images/fullbanner.gif" alt="fullbannerad", title="fullbannerad" id="img-fullbannerad" />
</div>
</td>
<td>
<div id="halfbannerad" class="halfbannerad">
<img src="~/Images/halfbanner.gif" alt="halfbannerad", title="halfbannerad" id="img-halfbannerad" />
</div>
</td>
</tr>
</table>
</td>
<td>
<div class="site-logo">
<img src="~/Images/site-logo.gif" alt="site-logo", title="site-logo" id="img-site-logo" />
</div>
</td>
</tr>
</table>
</div>
</header>
below is the css
table.headertable {
border-spacing: 0;
border-collapse:collapse;}
.headertable td {
padding:0;}
There is a space added between td & table(nested table) elements to the page in the code below (this I checked in chrome debugger)
<td>
<table class="headertable">
How can I resolve this issue? Please suggest.
Extra whitepsace in your document should be ignored by the browser. If you having problems with your page layout, it won't be due to extra spaces in that position.
I resolved this issue by making use of nested divs with float property. HTML5 does not encourage nested tables for layout design. Ref to this link for more details. Thanks Jennifer, you made my day.
Below is my code changes
<div id="header" class="clearfix">
<div id="sitetitle" style="float:left">
<a href="/Publication/Config/title">
<img src="/images/site-title.gif" alt="site-title" , title="site-title" id="img-site-title" />
</a>
</div>
<div id="logo" style="float:right">
<a href="/Publication/Config/logo">
<img src="/images/site-logo.gif" alt="site-logo" , title="site-logo" id="img-site-logo" />
</a>
</div>
<div id="bannerad" style="float:left">
<a href="/Publication/Config/fullbanner">
<img src="/images/fullbanner.gif" alt="fullbannerad" , title="fullbannerad" id="img-fullbannerad" />
</a>
</div>
<div id="halfbannerad" style="float:right">
<a href="/Publication/Config/halfbanner">
<img src="/images/halfbanner.gif" alt="halfbannerad" , title="halfbannerad" id="img-halfbannerad" />
</a>
</div>
</div>