I have an image which is on the right and the text needs to be beside it on the left with the start of the text inline with the top of the image, how would I do this?
#pic0 {
width:100%;
}
#pic0img {
display: inline-block;
height: auto;
margin-left:50%;
width:100%;
margin-bottom:5px;
}
pic0txt {
margin-right:52%;
width:48%;
}
<div id="pic0">
<div id="pic0img">
<img src="Images/Activities/pic0.fw.png" width="50%"
onmouseover="this.src='Images/Activities/pic0.fw.png'"
onmouseout="this.src='Images/Activities/pic0.fw.png'" />
</div>
<div id="pic0txt">
<p>test</p>
</div>
</div>
See this simplified snippet (remove borders which are just for test):
#pic0txt {
display: inline-block; border:1px solid red;
text-align:center;
vertical-align:top;
width:48%;
}
#pic0img {
display: inline-block; border:1px solid red;
width:48%;
}
<div>
<div id="pic0txt">test</div>
<img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />
</div>
<hr/>
<div>
<img id="pic0img" src="https://www-asp.azureedge.net/v-2016-11-01-012/images/ui/home-free-courses.png" />
<div id="pic0txt">test</div>
</div>
Use flex on the parent, then flex-grow on each flex item so they'll be 50% width, and set the image to width: 100% so it fills it's parent.
.flex {
display: flex;
}
.flex > div {
flex-grow: 1;
flex-basis: 0;
}
img {
width: 100%;
}
<div class="flex">
<div>
<p>text</p>
</div>
<div>
<img src="http://www.w3schools.com/css/paris.jpg">
</div>
</div>
Try this simple and easy trick:
<div id="pic0">
<div id="pic0img">
<p> <img src="http://images5.fanpop.com/image/photos/31300000/beautiful-heart-pic-beautiful-pictures-31395948-333-500.jpg" width="50%"
onmouseover="this.src='Images/Activities/pic0.fw.png'"
onmouseout="this.src='Images/Activities/pic0.fw.png'" />test</p>
</div>
</div>
#pic0 {
width:20%;
}
#pic0img {
display: inline-block;
height: auto;
margin-left:50%;
width:100%;
margin-bottom:5px;
}
Related
I have a layout similar to table that contains 3 columns.
The first column is 40px，second is auto width by it content, third is the rest available width.
The rows should be highlight when hover, and have click listener.
Tried to use table and grid box layout. But still have some problems.
Table:
table-layout: fixed, can't get the real rest width.
table-layout: auto, can't set max-width of table.
Grid:
wrap cells with row, the column can't be a same width(not align).
unwrap, can't set the row event and style.
So, is there any solution to reslove the problems.
codepen: https://codepen.io/Woody-lxf/pen/dyOQezE
<section style="width:300px">
<main>
<div class="row">
<div class="col1"><input type="checkbox"/></div>
<div class="col2">type: checkbox <br/> value:1111111</div>
<div class="col3">The Description 11111111</div>
</div>
<div class="row">
<div class="col1"><input type="radio"/></div>
<div class="col2">type: radio <br/> value:2</div>
<div class="col3">The Description 22222222222222222222</div>
</div>
</main>
<hr/>
<main class="table">
<div class="tr">
<div class="td1"><input type="checkbox"/></div>
<div class="td2">checkbox <br/> value:1</div>
<div class="td3">The Description 11111111</div>
</div>
<div class="tr">
<div class="td1"><input type="radio"/></div>
<div class="td2">radio <br/> value:2</div>
<div class="td3">The Description 22222222222222222222</div>
</div>
</main>
</section>
main{
background:#f7f7f7;
}
main *{
box-sizing:border-box;
}
.row{
display:grid;
grid-template-columns: 40px minmax(min-content, 40px) auto;
width:100%;
cursor:pointer;
}
.row:hover{
background:#e6e7e8;
}
.row>*{
padding:4px 8px;
white-space:nowrap;
}
.col3, .td3{
overflow:hidden;
text-overflow:ellipsis;
}
.table{
width:100%;
table-layout:fixed;
display:table;
}
.tr{
display:table-row;
cursor:pointer;
}
.tr:hover{
background:#e6e7e8;
}
.tr>*{
display:table-cell;
padding:4px 8px;
white-space:nowrap;
}
.td1{
width:40px;
}
Not 100% sure what you want, but if I understand correctly, it can be done with flex:
<div className="container">
<div className="column1" />
<div className="column2" />
<div className="column3" />
</div>
And css just like this:
.container {
height: 80vh;
width: 80vw;
margin: auto;
display: flex;
padding: 5px;
}
.column1 {
background: lightgreen;
height: 100%;
width: 250px;
}
.column2 {
background: lightcoral;
height: 100%;
}
.column2:hover {
background: lightgreen;
}
.column2:active {
background: yellow;
}
.column3 {
background: lightblue;
height: 100%;
}
What I am trying to do is centre the img elements both vertically and horizontally inside the img-container. The img-container needs to be a % of the parent element not a fixed width. (ie the outer-container may not always be 1000px)
Although the code below centres the image fine withing the img-container, the width of the img-continer seems to ignore the CSS width 20%. Ie I cannnot get the img-container to get the correct (in this case 200px) width.
Any suggestions?
-Matt.
Here is my CSS
#outer-container{
width:1000px;
}
.img-container {
height:20vh;
width:20%;
vertical-align:middle;
display: table-cell;
}
.centred-img {
display:block;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}
Here is my HTML:
<div id="outer-container">
<div class="img-container">
<img class="centred-img" src="1.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="2.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="3.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="4.jpg">
</div>
</div>
Use display:inline-block on the child elements and use text-align:center on the parent.
That should do the trick for horizontal centring. To make it centre vertically, you need to
add line-height to your images parent and vertical-align:middle to image itself.
Try using this CSS.
#outer-container{
width:500px;
border:1px solid black;
}
.img-container {
height:20vh;
width:20%;
display: inline-block;
border:1px solid black;
line-height:20vh;
text-align: center;
}
.centred-img {
vertical-align:middle;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}
Here's my fiddle just using css tables. Is this what you're looking for? The height and width are both dynamic.
http://jsfiddle.net/sinnix/dpppzuds/
<div class="container">
<div class="row">
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
</div>
</div>
.container {
display: table;
width: 90%; /* adjust as desired */
height: 100px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
background: magenta;
vertical-align: middle;
text-align: center;
}
.cell:nth-child(even){
background: yellow;
}
So here's my HTML:
...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>
<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]
The only CSS I have is:
* {
margin: 0px;
}
img.logo {
display: block; margin-left: auto; margin-right: auto;
}
I really need help to align the three divs on the whole page. Also div.center must have the same size as the image, aka width - 800px and height - 600px.
It looks much more like a table than divisions to me...
<table class="header"><tr>
<td class="left"></td>
<td class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</td>
<td class="right"></td>
</tr></table>
Think about so CSS afterwards :
table.header{
width: 100%;
border-collapse: collapse;
}
table.header td{
vertical-align: top;
border: 1px solid #404040;
}
table.header td.center{
width: 800px;
height: 600px;
}
This is just a code sample, get the idea, and adapt to your own needs ^^
Add these classes to your css
.left
{
display:inline-block;
width:25%;
}
.center
{
display:inline-block;
width:50%;
}
.right
{
display:inline-block;
width:25%;
}
With the following markup, 2 solutions come to mind:
MARKUP
<div class="header">
<div class="left">
Some left test
</div>
<div class="center">
<img class="logo" src="http://placehold.it/50x50" />
</div>
<div class="right">
Some right text
</div>
</div>
Solution #1
Float left and right sides and use display-block on the center
FIDDLE
Css
.header
{
text-align: center;
width:100%;
}
.left
{
float:left
}
.right
{
float:right;
}
.center
{
display:inline-block;
}
Solution #2
Use text-align: justify; on the header element.
Then stretch the content to take up 100% width
FIDDLE
CSS
.header
{
text-align: justify;
width:100%;
}
.header > div
{
display: inline-block;
}
.header:after {
content: '';
display: inline-block;
width: 100%;
}
.left, .centre, .right {
float:left;
}
What float:left does is, is it'll make each container organize itself from the left, so you get:
[LEFT]-[CENTRE]-[RIGHT]
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
My aim is to place 3 images in one row with the same distance from each other, as it is shown in the picture below (assuming the 2 arrows have the same length).
By now my solution is a very ugly one, which breaks, if the window size is too small:
<h1>
<div style="width:105px; height:30px; float:left; margin-top:25px;">
<img src="image1.png"/>
</div>
<div style="width:190px; height:30px; float:left; margin-top:25px; margin-left:30%; margin-right:30%;">
<img src="image2.png"/>
</div>
<div style="width:102px; height:30px; float:right; margin-top:25px;">
<img src="image3.png"/>
</div>
<div style="clear: both;">
</div>
</h1>
I would really prefer a "clean" solution, but my HTML knowledge about positioning is too limited so far.
Any help would be appreciated.
Use text-align: justify:
<div class="outer">
<img src="http://placehold.it/50x100" />
<img src="http://placehold.it/150x100" />
<img src="http://placehold.it/50x100" />
<span class="fix"></span>
</div>
.outer {
text-align: justify;
}
.outer img {
display: inline-block;
vertical-align: center;
}
.outer .fix {
width: 100%;
height: 0;
display: inline-block;
}
In most browsers, you can remove that .fix span, and add:
.outer::after {
width: 100%;
height: 0;
display: inline-block;
content: "";
}