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
Related
What's the default css of a td which makes it so that stuff are automatically centered vertically?
I know how to get things to center horizontally given that a div is smaller than its parent with margin: 0 auto but what's allowing a td to center vertically automatically?
#outer {
width: 200px;
height: 200px;
background-color: yellow;
}
#inner {
width: 60%;
margin: auto;
background-color: red;
}
<div id="outer">
<div id="inner">
centered only horizontally
</div>
</div>
<table height=200 border=1>
<tr>
<td>
I center automatically
</td>
</tr>
</table>
The default css of td elements is display: table-cell. This property, will also accept vertical-align.
So, you might need to set the css:
td {
vertical-align: middle;
}
.outer {
display: table-cell;
vertical-align: middle;
width: 400px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 60%;
margin: 0 auto;
background-color: yellow;
text-align: center;
}
<table height="200" border="1">
<tr>
<td>I am vertically centered</td>
</tr>
</table>
<div class="outer">
<div class="inner">
This is vertically centered
</div>
</div>
vertical-align: inherited;
for TD & TR in user agent stylesheet i.e default browser stylesheet. So TD is referring vertical-align of TBODY which is as below and thats causing it to align vertically in middle.
vertical-align: middle;
To override, default stylesheet you can do something like
td{
vertical-align: top !important ;
}
#outer{display:table-cell;}
#inner{vertical-align:middle;}
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>
I know there are similar questions, but I was not able to find answer to my question.
I have two divs next to each other, left is fixed width of 220px and right should take up the rest of the space. The trick is that the right one contains a table that should be fluid too and always stay as wide as it can.
I tried it even without right div, so there was div on left and table on right. If I don't give the table set width of 100% its fine, but then table stays at about 150px, and does not occupy all free space (as table changes size based on content).
Here is the JSFiddle: http://jsfiddle.net/4tchm0r9/6/
.wrapper {
width: 100%;
max-width: 800px;
}
.left {
border: 1px solid green;
float: left;
width: 220px;
}
.right {
width: 100%;
border: 1px solid red;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Thanks for any help. I Googled, but haven't found nothing.
Ps.: I can not set both of them to % or use table for it, as depending on device size, I will be swapping their positions (the two divs on left will go next to each other and the one on right will go below them).
I also can not use calc function for backwards compatibility, no JS too. Pure HTML and CSS required.
Did you tried use table properties?
The .wrapper can be the table, then their children will be the cells. Look:
.wrapper{
width: 100%;
display: table;
}
.left{
border: 1px solid green;
width: 220px;
display: table-cell;
}
.right{
border: 1px solid red;
display: table-cell;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<table class="right">
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
<tr>
<td>
Table that should occupy the rest of the space and fluidly resize!
</td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/83295cvs/
Add both of those divs to a 100% parent container, with position set to relative. Then, the fixed div with width of 200px should be absolutely positioned on the top left, and add padding-left to the right div equal to the left div's width.
http://jsfiddle.net/z12p0b5v/
HTML:
<div class="container">
<div class="left">
<div class="content"></div>
</div>
<div class="right">
<div class="content"></div>
</div>
</div>
CSS:
.container {
width: 100%;
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.left .content {
width: 200px;
height: 200px;
background-color: red;
}
.right {
padding-left: 200px;
}
.right .content {
background-color: blue;
width: auto;
height: 300px;
}
Just put table with width:100% into a div with display:flex
.wrapper{
width: 100%;
max-width: 800px;
}
.left{
border: 1px solid green;
float: left;
width: 200px;
}
.right{
border: 1px solid red;
width: 100%;
}
<div class="wrapper">
<div class="left">
<div>
Some random irrelevant div that has fixed width of 220px no matter what and contians two divs.
</div>
<div>
Ladidaaaa? Maybe? Lolz.
</div>
</div>
<div style="display: flex;">
<table class="right">
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
<tr><td>
Table that should occupy the rest of the space and fluidly resize!
</td></tr>
</table>
</div>
</div>
I'm trying to align three images in a class div into a straight horizontal line.
<div class="topimages">
<img src="code/images/image_personallogo.png" alt="personallogo">
<img src="code/images/image_propercorn.png" alt="propercorn">
<img src="code/images/image_christmas.png" alt="christmascard">
</div><!--top images-->
and the CSS so far
.topimages {
display: table;
width: 1024px;
margin: 40px auto;
}
.topimages img {
width:319px;
height:319px;
}
So the problem is that the images are almost perfectly aligned except that there is different space between the second and third image than between the first and second image. This is what I am talking about : http://postimg.org/image/y00x4nvtr/
Anyone knows what cause this and how I can fix it?
Thanks.
The nicest way is to use a table with one tr:
HTML:
<table id="myImages">
<tr>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
<td>
<img src="code/images/image_propercorn.png" alt="propercorn" />
</td>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
</tr>
</table>
To change margin in a table, you must use border-collapse and border-spacing
CSS:
#myImages {
border: 1px solid silver;
padding: 50px;
margin: 0px auto;
border-collapse: separate;
border-spacing: 20px;
}
#myImages img {
width: 320px;
height: 320px;
}
In a table or (display: table) there is no need to set a whole width to use margin: 0 auto to center the element. The width comes from the width of the elements within. And from paddings and margins.
https://jsfiddle.net/ka827L97/
How can I get three divs to look as they are shown below with only HTML and CSS? Is it possible to align them in a way that the bottom text will stay under the text which is the longest?
<html>
<div id=1>
Short text
Bottom text?
</div>
<div id=2>
Long text
Bottom text?
</div>
<div id=3>
Not so long text
Bottom text?
</div>
</html>
As #Ruddy pointed outThanks for that, I used Flexbox approach for this, with CSS Positioning, so am using display: flex; for the parent element, and wrapping the bottom text in a span, and than am positioning the span to bottom using position: absolute; also, you don't have to assign fixed height to the containers, as we are using display: flex;
Flex Demo
div.parent {
display: flex;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
float: left;
position: relative;
padding-bottom: 30px; /* Make sure you tweak this, to the
highest height of your bottom content*/
}
div.parent > div > span {
position: absolute;
bottom: 0;left: 0;
}
Well, obviously you can use position: absolute; with bottom: 0; with padding-bottom: 30px;(approx) and wrap the bottom text in span and use position: relative; on the container element but again, you won't be able to stretch the other two containers which doesn't have height and thus it will fail.
So you need to use display: table-cell; with vertical-align: bottom;, it will keep pushing the text to the bottom which has content, also, vertical-align: bottom; will see to it that even the other containers text stick to the bottom
Demo
div.parent {
display: table;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
display: table-cell;
vertical-align: bottom;
}
Yes, this is possible. But first: give the three a wrapper. Beside that, you can't use numbers as ID's.
Here you go: http://jsfiddle.net/SP68r/
<div class="wrapper">
<div id="first">
Short text
Bottom text?
</div>
<div id="second">
Long text
Long text
Long text
Long text
Long text
<div class="bottom">bottom text</div>
</div>
<div id="third">
Not so long text
</div>
</div>
The CSS
.wrapper { width: 350px; }
#first, #second, #third { float: left; width: 100px; }
#first { margin-right: 10px; }
#second { padding-bottom: 40px; margin-right: 40px; }
div.bottom { position: absolute; bottom: 0; }
<div id="1" style="border: 2px black solid; width: 120px;
height: 160px; position: relative;">
<div style="text-align: left;" id="1-1">
Not so long text
</div>
<div style="left: 17%;position: absolute; bottom:0px;" id="1-2">
Bottom text?
</div>
</div>
You can use position:absolute
DEMO
Simple Solution : Use a table.
<table border="1" width="100">
<tr valign="top">
<td>DIV 1</td>
<td>DIV 2<BR/>THIS IS A BIG, BIG, LONG PARAGRAPH, WHICH WILL GO DOWN THAN THE OTHER TWO CELLS.</td>
<td>DIV 3</td>
</tr>
<tr>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
</tr>
</table>
fiddle here.