I would like to have the inner divs within the bottom row of this table fill the bottom half of the table in height. Any help would be appreciated.
http://jsfiddle.net/6QGDn/1/
This is what I see in Firefox 28.0
EDIT: This was fixed by using the .relative class on the td in the bottom row. Problem solved, thanks for your help.
HTML
<table>
<tr>
<td>
Top Row 1
</td>
<td>
Top Row 2
</td>
<td>
Top Row 3
</td>
<td>
Top Row 4
</td>
<td>
Top Row 5
</td>
</tr>
<tr>
<td class="no-border relative" colspan="5">
<div class="left-half">
<div class="div-td">
Bottom Row 1
</div>
</div>
<div class="right-half">
<div class="div-td">
Bottom Row 2
</div>
</div>
</td>
</tr>
</table>
CSS
table {
width: 400px;
height: 240px;
}
table, td, tr, .div-td {
border: 1px solid #000;
}
.no-border {
border: none;
}
.relative {
position: relative;
height: 50%;
}
.left-half {
float: left;
height: 100%;
width: 50%;
}
.right-half {
float: right;
height: 100%;
width: 50%;
}
.div-td {
height: 100%;
}
Related
I'm trying to get the text to display over each individual image, I can't figure out why it's not displaying at all. From what I can tell I don't have the text hidden or anything, it's just not displaying on top of the corrisponding images.
I'm very new to html/css so i'm proberly missing someting quite obvious.
<html>
<body>
<table class="index">
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Care-Guide.jpg">
Care guides
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Prop.jpg">
Propagation
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Trouble.jpg">
Troubleshooting
</td>
</tr>
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Easy.jpg">
Easy plants
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pilea.jpg">
Pilea
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pets.jpg">
Pets & plants
</td>
</tr>
</table>
</body>
</html>
table.index{
table-layout: fixed;
border-spacing: 25px 35px;
font-size: 20px;
color: #575151;
padding-left: 180px;
padding-right: 180px;
}
table.index td {
height: 220px;
width: 360px;
min-width: 200px;
position: relative;
border: 1px solid black;
background-color: #575151;
vertical-align: middle;
text-align: center;
}
table.index td img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
div.index {
width: 100%;
}
You should put your text in an HTML element for example p tag: <p>Easy plants</p>
Give the p element a relative position: position: relative;
This will position it over the absolutely positioned image.
If you happen to change the order of the images and the text elements later, you should give the text elements a higher z-index value than the images.
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 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>
How do I make an element take up a percentage width of a table cell? When I attempt to do a percentage, say 70%, it grows much larger than the containing cell. 70% should be smaller than the containing cell! Here's a barebones example of my page. The absolute positioning is necessary for some layering I want to do.
HTML
<table>
<tr>
<td>
<div>hello</div>
</td>
<td>
<div>world</div>
</td>
</tr>
</table>
CSS
td {
position: relative;
width: 10em;
}
div {
position: absolute;
width: 70%;
}
Matt Ball's comment got me on the right track. It's some extra markup.
HTML
<table>
<tr>
<td>
<div class="container">
<div class="bar">hello</div>
</div>
</td>
<td>
<div class="container">
<div class="bar">world</div>
</div>
</td>
</tr>
</table>
CSS
td {
width: 10em;
}
.container {
position: relative;
}
.bar {
position: absolute;
width: 70%;
}