So I have html layout as this one:
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" />
<div class="summary">Short summary</div>
How to display it as:
<img src="image.jpg" /> <h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with floats however it displayed as:
<h1>Title</h1>
<img src="image.jpg" /> <div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with positions (relative and absolute) and I got what I wanted, unfortunately it doesn't work very well in IE and if the short summary text is very short then image hides behind the other elements. I don't know image height (dynamic height), so height: xxx px; doesn't fit here.
Any help would be great.
EDIT:
I can't div wrap all (right side) elements in this case.
To get it done without adding additional divs to your code, add the below CSS
img{float:left}
div{display:table-row}
DEMO 2
Use position:absolute
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" width="40" />
<div class="summary">Short summary</div>
CSS
img{float:left; top:0; position:absolute; left:0}
div, h1{display:block; margin-left:40px /*Add image width value as margin-left*/ }
DEMO 3
<img src="image.jpg" class="left-image" />
<div class="right-col">
<h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
</div>
CSS
.left-image {
float: left;
}
.right-col {
margin-left: <width-of-image> px;
}
how about this: http://jsfiddle.net/xpq2m/
CSS
body {
padding-left: 100px;
}
img#s {
position: absolute;
top: 0;
left: 0;
}
Related
I have this piece of code. It doesn't scale my images to this size.
Height and width doesn't work. Why?
in style.css i have this line:
.gallery-popup .image-container img{width: 100%; height: auto; display: block;}
<div class="trace">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="tagline">
<div class="content">
<div class="title">TITLE</div>
<div class="description">TEXT</div>
</div>
</div>
</div>
<div class="overflow">
<div class="swiper-container" data-autoplay="0" data-loop="1" data-speed="500" data-center="0" data-slides-per-view="1">
<div class="swiper-w">
<div class="swiper-s">
<div class="image-container">
<img src="img/content/Imagesall/13347.jpg" height="250" width="250" alt="" />
<div class="description">
<div class="title">titletext</div>
<div class="text">texttexttext.</div>
</div>
</div>
</div>
Without any css to look in is this the responsive css for <img> images. Give the img a width and set the height to auto. You do not have to use the height and width in the html, use the css to give a width only
<div class="trace">
<img src="img/content/Imagesall/13347.jpg" alt="" />
.trace img {
width: ...; /* use for example px or % */
max-width: 100%;
height: auto; /* this line to preserve width:height ratio */
border: 0; /* remove default border of img */
}
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.
Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.
You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.
So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)
I have this on my page. i wanted the container divs to align at the center. so i gave display:inline-block. but it didn't work. why is this happening? is there a way to display the containers as inline-block elements so that they appear exactly at the center?
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
css
#container {
vertical-align:top;
}
#image {
height:30%;
width:30%;
position: absolute;
overflow: hidden;
}
#definition {
width: 30%;
height: 30%;
position: absolute;
background-color: red;
}
Using display: table and display: table-cell this code will centre the divs on the page: Fiddle. Hopefully this is the effect you want.
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form