I want to create a simple thumbnail grid for showing images from the Europeana API. However for some weird, probably very obvious, reason I get random rows in this grid with large spaces as if the floating isn't working. However the same layout with random images (http://placehold.it/250x350) does not seem to have this problem. See result of html and css here: http://jsfiddle.net/VqJzK/1/ .
CSS of the grid
.thumb {
width: 200px;
background-color: #F5F5F5;
border-radius: 5px;
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: left;
position: relative;
display: inline-block;
float: left;
}
.thumb img {
width: 150px;
vertical-align: middle;
}
and the html:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
....
The broken formatting is because some images are taller in the second example. The taller images take up more space and because the thumbnails have float:left set, they flow around the taller one. This explains why the first example works, since they all have the same height.
That said, float:left is also overriding the display:inline-block with display:block - see css display property when a float is applied
If you remove float:left or set the height of the .thumb class the thumbnails will also line up as expected.
sounds like the standard inline-block bug, simple fix is to change your code to this:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
butt the elements right up next to each other, because it's treated as inline spaces between elements matter, because text itself is inline
alternatively you could use comments like this:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><!--
--><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
Related
I am trying to have an image sitting next to some text. The text needs to sit halfway vertically on the image
[IMG]
[IMG] Here is the text
[IMG]
I am getting the following, because the two cell divs are equal width, instead of matching content width:
[IMG]
[IMG] Here is the text
[IMG]
The code is preexisting. There is a table container div:
.vertical-align-container {
display: table;
table-layout: auto;
width: 100%;
}
And two table cell divs:
.vertical-align-child {
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
So no matter what I do, the table cells are equal width. How can I get the first to match content width, and the second to fill the remainder of the container?
HTML:
<div class="vertical-align-container">
<div class="vertical-align-child" style="padding-left: 0;">
<img src="path/img.png">
</div>
<div class="vertical-align-child">
<p>Here is the text</p>
</div>
</div>
As you can see, I've tried a couple things, but what I've included here is table-layout, which I though was supposed to do exactly this?
I think you could approach this with flexbox.
You can use the align-items property for vertical centering.
.container,
.text {
display: flex;
}
.text {
align-items: center;
padding-left: 1rem;
}
.image img {
display: block;
width: 100%;
height: auto;
}
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
<div div class="text">
<p>
Here is the text
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
Found an ugly workaround for this here:
CSS table column autowidth
The issue I was having was that my image is set to 100% width, while using a max-width of the size I wanted it to stop at. Apparently the table isn't willing to read in the max-width as the content size, so it chose 50%.
I hacked in a width for the image and set the table cell to have nowrap, as in the linked question. It's not by any means a good answer, but it'll do for a quick fix.
So, I have these two images. The HTML structure is like this:
<div class="buttonContainer">
<div class="innerButton">
<img src="...">
<p> Some text </p>
</div>
</div>
But as you can see, both containers have different heights (because of the length of the p content. I'm not a very experienced at CSS, so any help is welcome.
.innerButton{
min-height: /*set your height*/;
}
Hope this helps
Set height attribute to the <p> containing your text. But if the text is too long, it will overflow out of the <p>
Truncate your text: You can truncate your text using the following code.
<p id="greetings">
Hello universe!
</p>
CSS
#greetings
{ width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Then text will become
Hello univ…
A good question and one I encounter a lot.
Firstly you have two options that work well. Go the pure CSS route or use some jQuery. The latter being easier to implement and to be honest, overheads are not too bad either.
The reason I've not gone for using min-height is I am assuming you might want this working responsively where min-heights can be an annoyance. This method means you never need to specify heights explicitly which in my opinion is better.
1. Pure CSS (using display table)
.buttonGrouping.css{
display: table;
border-spacing: 20px;
}
.css .buttonContainer{
display: table-cell;
margin: 0 20px;
border: 1px solid #ccc;
}
HTML for CSS tables
<!--Example using CSS-->
<div class="buttonGrouping css">
<div class="buttonContainer">
<div class="innerButton">
<img src="http://placehold.it/350x150">
<p> Some text </p>
</div>
</div>
<div class="buttonContainer">
<div class="innerButton">
<img src="http://placehold.it/350x150">
<p> Some text </p>
<p> Another para </p>
</div>
</div>
</div>
2. jQuery (using matchHeight.js)
Note you I've included the matchHeight plugin in the live example at the bottom. The plugin can be found here.
CSS:
.buttonGrouping.jquery{
clear: both;
}
.jquery .buttonContainer{
float: left;
display: block;
border: 1px solid #ccc;
margin: 0 20px;
}
And initialize the script on the element...
$(".jquery .buttonContainer").matchHeight();
Please note the .jquery in the script is just a class i added to each example to separate them out.
Live examples
How to size/wrap a div container around an image inside It? Where float: right and margin-left: auto are potentially causing issues.
I'm struggling to get a div to be sized by wrapping properly around the image inside it. Please have a look at the example I'm referring to here:
Link to Example
(Might be worth playing around with the window size to help explain my problem)
I'm practicing with Bootstrap for the first time. The red blocks on each side are grid blocks 1 and 12, with the blue, and green sections filling the remaining 10. The big orange rectangles are responsive images that I want to be kept central spaced 20px apart at all times.
Using Chrome's "Inspect Element" (or similar) - If you inspect the orange rectangle on the right hand side, and have a look at the container div (class="container-img-r") - This div is wrapping around the orange image exactly how I wanted (albeit including the invisible border). But I'm not having much luck achieving the same result with the div container for the orange image on the left side (it still fills the blue parent element)
I've played around with different options for float/margins/position but can't seem to crack it.
Here's the CSS I have for the relevent content:
.container-img-l {
/* float:right; ??? Nothing I tried here seemed to make a difference */
}
.container-img-r {
float:left;
}
.item-pos-l {
margin-left:auto;
border-right:10px solid transparent; /* Margins just collapsed when resizing window */
height:323px;
width:510px;
}
.item-pos-r {
float:left;
border-left:10px solid transparent;
height:323px;
width:510px;
}
The reason for me wanting the div to accurately wrap around the responsive images is that I want to overlay some more CSS content over the images, scaling/re-positioning automatically as the window/device size changes (Click here and you'll clearly see where I'm hoping to implement this responsive style).
Maybe there are clashes with the Bootstrap CSS at play but I'm out of ideas.
Your first link doesn't remotely look like the html you want to make responsive. It would be best to learn responsive and fluid (no pixels heights or widths if possible) css before attempting to modify a framework you are unfamiliar with. Also, you have an error in your html - validate it to make sure you've closed all your elements. Also indent and comment all your code and avoid the use of inline styles.
Demo: http://jsbin.com/wazanu/2/
http://jsbin.com/wazanu/2/edit -- edit link
CSS:
body {background:#eee}
.header {padding:20px;}
.portfolio-grid .col-sm-6 {
margin-bottom: 30px
}
.img-wrapper .title {
text-align:center;
}
#media (min-width:768px) {
.img-wrapper {
position: relative;
overflow: hidden;
}
.img-wrapper img {width:100%;}
.img-wrapper .title {
position: absolute;
text-align:left;
bottom: -90px;
padding: 0 20px 20px 20px;
height: 150px;
background: red;
transition: all .5s ease-in-out;
}
.img-wrapper .title h3 {
margin: 0;
height: 60px;
line-height: 60px;
}
.img-wrapper:hover .title {
bottom: 0
}
}
HTML:
<header class="header text-center">
My header
</header>
<div class="container">
<div class="row portfolio-grid">
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
<div class="title">
<h3>Title of Project</h3>
<p>Content about project goes here</p>
</div>
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
</div>
<!--/.row-->
</div>
<!--/.container-->
Based on my earlier thread I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.
With my short text the two divs align correctly, but when I add loner text it drops below the image. Can anyone explain why this is happening and how do I fix it?
My JSFIDDLE
HTML:
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
CSS:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
padding:5px;
float: left;
}
div.right {
float: left;
}
.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
Floats expand to try to encompass their content. They generally expand up to the width of the containing region, regardless of how they are positioned. That is why it is going to a new line when the text is really long.
For what you are doing, I believe you want the image to the left of some text. This is done by having the outer region set with clearfix CSS (to always encompass all floats):
.container {
overflow: hidden;
min-width: 1px;
}
/* IE7+ */
*+html .container {
min-height: 1%;
}
Then, only float your image to the left. Do NOT float your content. Add margins around the image as desired. So something like:
.left {
float: left;
margin: 0 10px 10px 0; /* 10px on right and bottom */
}
The content in the div will then act like you are expecting.
Remove the float rule on the long text (jsFiddle example). When en element is floated after another floated element, it can't come before it vertically.
<div>
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
See the W3 for the long version:
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
Remove the float:left; on the rule and it will work. However, you may want to improve and test in ie 6+.
You have to set max-width attribute to restrict your text form taking as much space as available and to get maximum space its going to next line.
http://jsfiddle.net/a6BbD/1/
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
<br>
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some short text here</div>
</div>
</div>
The recommendation says you should always set width on floated elements.
the below link has great material to understand floats..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Ok so I'm trying to align an image(which is contained in a div) and some text(also contained in a div) on the same line, without setting width for the text, how can i do it? This is what I have so far.
<div id="container">
<div id="image" style="float:left;">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
</div>
When the text is short, the image and text can be fit into the same line, but my text is pretty long, and it automatically jumps on another line below the image.
Basically, now it's this: http://puu.sh/MPw2
I want to make this: http://puu.sh/MPvr
I'm been trying to solve this problem for like 3 hours I'm so noob please help? :S
Floating will result in wrapping if space is not available.
You can use display:inline and white-space:nowrap to achieve this. Fiddle
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<img src="tree.png"/>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
A very long text(about 300 words)
</div>
</div>
Try
<img src="assets/img/logo.png" align="left" />
Text Goes here
Simple HTML Attribute:
align="left"
Other values for attribute:
bottom
left
middle
right
top
I know this question is over 6 years old, but still, I would like to share my method using tables and this won't require any CSS.
<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>
Cheers!
Happy Coding
To get the desired effect, you should place the image tag inside the same div as your text. Then set the float: left attribute on the image. Hope this helps!
I was working on a different project when I saw this question, this is the solution I used and it seems to work.
#[image id] , p {
vertical-align: middle;
display: inline-block;
}
if it doesn't, just try :
float:right;
float:left;
or
display: inline instead of inline-block
This worked for me, hope this helped!
Method1:
Inline elements do not use any width or height you specify.
To avoid two div and use like this:
<div id="container">
<img src="tree.png" align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
<style>
img {
display: inline;
width: 100px;
height: 100px;
}
h1 {
display: inline;
}
</style>
Method2:
Change your CSS as follows
.container div {
display: inline-block;
}
Method3:
It is the simple method set width
Try the following css:
.container div {
overflow:hidden;
position:relative;
width:90%;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.image {
width:70%;
display: inline-block;
float: left;
}
.texts {
height: auto;
width: 30%;
display: inline;
}
Try
<p>Click on <img src="/storage/help/button2.1.png" width="auto"
height="28"align="middle"/> button will show a page as bellow</p>
It works for me
From another answer :
<table>
<tr style="background-color:white">
<th><b>To solve your doubts </b></th>
<th><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" style="width:150px" style="display:inline-block; "/></th><th style="float:right"></th>
<th><b> has the requisite clout.</b></th>
</tr>
</table>
Demo:
:D A little cheesy but, I thought, why not.
I built on the last answer and used display:table for an outer div, and display:table-cell for inner divs.
This was the only thing that worked for me using CSS.
Just set the img css to be display:inline or display:inline-block
U wrote an unnecessary div, just leave it like this
<div id="texts" style="white-space:nowrap;">
<img src="tree.png" align="left"/>
A very long text(about 300 words)
</div>
What u are looking for is white-space:nowrap; this code will do the trick.
<div id="container" style="display: flex;">
<div id="image" style="float:left; margin-top: 10px">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
use display flex and give margin-top(10 is approximate), please remove the float and give width to both div.