I'm trying to put two images side by side in a table and have the following behavior on the first image:
Have it be right up against the bottom of the table, so the bottom border is overlapping with the bottom border of the table.
Have no right margin or padding, so it is right against the second image (so the right border of the first image is overlapping with the left border of the second image).
To solve the first thing I'm using valign="bottom" but that doesn't seem to fully work.
To solve the second issue I'm using padding-right:0px; margin-right:0px; but that doesn't work either.
Can anyone help me achieve the behavior I'm going for please? Note that I'm using a table because I have other things in this table, I just took them out to simplify the question.
table {
border: 1px solid black;
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg > img {
border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg" valign="bottom">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V"></img>
<td>
<td valign="bottom">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg"></img>
<td>
</tr>
</table>
Below you can see two tricks that should work for you. In first I've made td to be display: flex with two alignments. ;). In second I used inside div element with flex, so to not change default display: table-cell for td element. I've also fixed typos in tags you used.
table {
border: 1px solid black;
}
.benderImg {
display: flex;
align-items: flex-end;
justify-content: flex-end;
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg>img {
border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
</td>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
</td>
</tr>
</table>
table {
border: 1px solid black;
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg>div>img {
border: 1px solid red;
}
.benderImg > div {
display: flex;
align-items: flex-end;
justify-content: flex-end;
height: 100%;
width: 100%;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="benderImg">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
</div>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
</td>
</tr>
</table>
First, you are using obsolete attributes, which is not recommended. Besides, some of the attributes try to set different values than the properties in the CSS, which is a no-no. Replace them all with CSS properties.
Secondly, the vertical align property should be on the img rather than on the td.
Then the distance between the two images; the second image has no border or margin, and neither does its td, so I'm not sure why you think there should be some spacing in between. I put a left padding on the td; you can change that to fit your needs.
And finally, </img> is unnecessary; not allowed even, since <img> is a void element. You can end the <img> tag with a slash if you want.
table {
border: 1px solid black;
width: 666px; /* css replacement for width attr */
border-spacing:0; /* css replacement for cellspacing attr */
}
td {
padding:0; /* css replacement for cellpadding attr */
}
.benderImg {
border: 2px solid green;
padding-right: 0px;
margin-right: 0px;
}
.benderImg > img {
border: 1px solid red;
vertical-align:bottom;
}
.benderImg + td {
padding-left:5px;
}
<table>
<tr>
<td class="benderImg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" alt="" />
<td>
<td>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" alt="">
<td>
</tr>
</table>
For the second issue, I fixed it by just using align="right" on the first image's td. The first issue was fixed with a vertical-align: bottom on the first image.
Related
I am learning HTML and I am trying to align different icons in a line but in a different positions. The first element should be aligned to the left and the others aligned to the right.
E1| |E2|E3|E4
I am not sure how to implement that. Should I use a table? Or a div with <li> elements?
I tried to use a table with a blank column but it's not working
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td width="60%"> test </td>
<td> blank </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</table>
You mean this?
Flex ratio
.box {
display: flex;
}
.box div {
background-color: yellow;
border: 1px solid black;
}
.e1{
flex: .1 0 0;
}
<div class="box">
<div class="e1">E1</div>
<div>E2</div>
<div>E3</div>
<div>E4</div>
</div>
or using table
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td>E1</td>
<td width="60%"> </td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
</table>
A common method for this is to use display: flex for the container and apply margin-left: auto to the first of the child elements that should be moved to the right. That way that left margin will grow as wide as possible within the given container and with the given settings:
.container {
width: 100%;
display: flex;
background: #ccc;
}
.container>div {
padding: 5px 10px;
}
.container>div:nth-child(2) {
margin-left: auto;
}
<div class="container">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</div>
I have table with 3 cells, and I want to make middle one higher than side ones, so for example middle one's height is 300px and side one's is 200px. I gave middle one seperate class than side ones and I set middle one to 300px and side ones to 200px. But they are still the same height, why?
#mid {
width: 600px;
height: 400px;
border: solid 1px black;
}
.side {
width: 300px;
height: 300px;
border: solid 1px black;
}
<table>
<tr>
<td class="side"></td>
<td id="mid"></td>
<td class="side"></td>
</tr>
</table>
You should only use tables for tabular data and not for layout. What you are trying to do is not achievable with a table as all table cells in a row will be the same height as the tallest cell of that row.
Instead you should use divs, in the following example I have used flexbox to align the divs in a row:
.container {
display: flex;
width: 1200px;
margin: auto;
}
.mid {
width: 600px;
height: 400px;
border: solid 1px black;
}
.side {
width: 300px;
height: 300px;
border: solid 1px black;
}
<div class="container">
<div class="side"></div>
<div class="mid"></div>
<div class="side"></div>
</div>
LIke others have mentioned in comments you are better off using a div or some other tags
but if you still want to use table you can do something like this
<table>
<tr>
<td> </td>
<td id = "mid" rowspan="2"></td>
<td></td>
</tr>
<tr>
<td class = "side"></td>
<td></td>
<td class ="side"></td>
</tr>
</table>
here is a fiddle
https://jsfiddle.net/vdadekvL/28/
I am trying to replace images in a single horizontal row - as cells in a table row.
That layout works with any other elements but not with <img> for some reason.
Check this:
div { display: table; border: 1px solid red; }
div > img { display: table-cell; }
<p>These shall be replaced in single row but they are not:</p>
<div>
<img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg" />
<img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg" />
<img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg" />
</div>
Any idea?
UPDATE: FF follows CSS spec and replaces them in single row. All other browsers are not. Heil Firefox!
EDIT
img is a replaced element, it's measured calculations and box model are different. See this ARTICLE
If you insist on using table and are concerned about spacing look at this fork of #StevenThomas's PenCode
I removed all the divs
.container { display: table; table-layout: auto; width: 100%; }
img { display: inline-table; margin: .33em; width: 30%; height: auto; }
Use margin: .125em if you want 4px; border-spacing.
Change div to inline-block
Change img to inline-block
div {
display: inline-block;
border: 1px solid red;
}
div > img {
display: inline-block;
}
<p>These shall be replaced in single row but they are not:</p>
<div>
<img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg">
<img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg">
<img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg">
</div>
Instead of a div, you could try using a table. Here's the syntax:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The tr tags are rows, the td tags are columns. I'd use this syntax:
<table>
<tr>
<td><img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg"></td>
<td><img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg"></td>
<td><img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg"></td>
</tr>
</table>
div {
display: inline-flex;
border: 1px solid red;
}
div > img {
height: 250px;
width: 250px;
display: table-cell;
}
Here,I just replaced display:table to display:inline-flex and this worked for me.
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
I want to make a formatted paragraph whose image is located in left, the text is located in right with CSS.
However, it looks good when I type a single line text, but the top position is changed when I type two-line text or more.
Its source is on
http://jsfiddle.net/RXrvZ/1883/
and the main part of CSS is:
.post-container {
margin: 20px 20px 0 0;
border: 1px dotted #333;
overflow: auto;
}
.greenbox {
display: block;
border: 1px dotted #383;
width: 100%;
}
.redbox {
display: inline-block;
border: 1px dotted #f33;
width: 70%;
height: 100px;
}
.redbox10 {
display: inline-block;
border: 1px dotted #f33;
width: 20%;
height: 100px;
}
And its HTML code is like:
<div class="greenbox">
<div class="redbox10">
<img src="#">
</div>
<div class="redbox">
One Line Text
</div>
</div>
How can I place the top line same whatever I type in?
Thanks for your help.
Set the left column to align at the top.
.redbox10 {
vertical-align: top;
}
JSfiddle
You need to specify vertical align to be top:
.redbox, img{
display: inline-block;
vertical-align: top;
}
Here's the updated demo
you should use float:
.redbox {
float: left;
}
.redbox10 {
float: left;
}
you can give them a margin for some space.
Demo
Demo With Margin
This could be rather simplified if made using a table.
I hope this helps.
.mainTable{
padding: 10px;
}
.outerRow{
padding: 10px;
}
.imageColumn{
border: 1px solid;
padding: 10px;
vertical-align: top;
}
.textColumn{
border: 1px solid;
padding: 10px;
}
<div class="container">
<table class="mainTable">
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
One Line Text
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Two Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Three Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf hello hello hello hello hello hellohellohellohellohellohello
</td>
</tr>
</table>
</div>