Is there a way to clear the bottom of an image? I tried margin-bottom: 100%, and padding-bottom: 100%, but it is not working because I have more divs below which clears all.
I want to clear only the content of the image containing div.
HTML
<div class="contentpart">
<p>
<a href="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1.jpg">
<img class="alignnone size-medium wp-image-88" alt="contact-feat" src="http://www.s1waterbike.ro/wp-content/uploads/2013/07/contact-feat1-300x200.jpg" height="200" width="300">
</a>
</p>
the text....
</div>
<div class="contentpart">
The text.....
</div>
CSS
.contentpart img {
float: left;
clear: bottom;
}
Example of how the solution should look like
Based on your image, you can realize the layout by using the the following HTML:
<div class="contentpart">
<a href="#">
<img src="http://placehold.it/300x200">
</a>
Donec adipiscing, lorem non euismod venenatis...
</div>
and applying the following CSS rules:
.contentpart {
border: 1px dotted gray;
display: table;
}
.contentpart a {
display: table-cell;
vertical-align: top;
padding-right: 20px;
}
You can see the demo at: http://jsfiddle.net/audetwebdesign/wknjA/
How This Works
You can use CSS tables to get the text to stay in a single column without wrapping it in a block element.
Apply display: table to the parent block and display: table-cell to the a tag.
You can have some control over white space by applying some padding to the a element.
Related
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
CSS question: I'm wanting a container with 3 inline images with a border around them (not each image). Under the image row and inside the container border I want a sentence or two of text. Without the text the container border is about the same width and height as the image row using display:inline-block, once I add the text the container width is 100%. I want the text to wrap under the image row and not expand beyond the left/right sides of the image row. I would like to know how this can be done and if it can be done using float:left and/or display:inline, display:inline-block. If it can be done both ways what are the pros and cons.
HTML:
<div class="container">
<img src="image1">
<img src="image2">
<img src="image3">
some text
</div>
CSS:
.container {
display: inline-block;
border: 1px solid black;
}
The following will create a div, with inner blocks for images and a block for text. They should both stay 500px. If the images are > 500px they will be clipped. The text won't cause it to overflow unless its a very long uninterrupted string.
If this doesn't help, use jsFiddle to put up an example.
CSS
.container {
width: 500px;
overflow: hidden;
background:red;
display: inline-block;
border: 1px solid black;
}
HTML
<div class="container">
<div class="images">
<img src="image1">
<img src="image2">
<img src="image3">
</div>
<div class="caption">
some text
</div>
</div>
This is a good example of what I'm wanting but with the text below the images. I would also like it to be HTML 5 compatible.
<div class="container">
<table>
<tr>
<td><img src="image1.jpg" height="200"></td>
<td><img src="image2.jpg" height=200"></td>
</tr>
<caption>a paragraph of text here...</caption>
</table>
</div>
.container {
display: inline-block;
border: 1px solid;
}
table {
margin: 0 auto;
}
Please, look at this sample template: http://jsfiddle.net/D8cye/2/
As you can see, the navbar expands to the bottom of the sidebar. Why? How can I avoid this?
I know I can workaround this by setting .navbar-inner{height:40px;}. But I feel that I'm doing something wrong of perhaps I have misunderstood something with the fluid grid.
Forked it here http://jsfiddle.net/Astraldiva/r6tHv/.
I think that one of the important things to consider while using twitter bootstraps fluid layout is not to have items with fixed width or the layout will brake. Not sure if this helps but I just rearranged the containers and placed the content in span8 + span4 divs to get similar layout like you wanted and this version should work on different screen sizes.
<div class=row-fluid>
<div class=span8>
<div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class=navbar>
<div class=navbar-inner>
<ul class=nav>
<li class=active><a href=#>Home</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
</div>
</div>
<div class=span4>
<div class=box></div>
<div class=box></div>
<div class=box></div>
</div>
</div>
EDIT
To get the wanted layout Peter made an extension on my idea in this fiddle.
There is a 2 column layout, a fixed with sidebar and fluid content area (with max and min width). So it's not completely fluid but solves the problem.
<div id=container>
<!-- Sidebar is floated right and has fixed width -->
<div id=side>
<div class=box></div>
<div class=box></div>
<div class=box></div>
</div>
<!-- Content wrapper is in normal flow with margin-right of at least the width of a sidebar-->
<div id=main>
<div class=row-fluid>
<div class=span12>
<div id=text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class=navbar>
<div class=navbar-inner>
<ul class=nav>
<li class=active><a href=#>Home</a></li>
<li><a href=#>Link</a></li>
<li><a href=#>Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
border: 1px solid #f00;
max-width: 600px;
min-width: 300px;
}
#side {
float: right;
width: 100px;
border: 1px solid #0f0;
}
#main {
margin-right: 108px;
border: 1px solid #00f;
}
#text {
padding: 8px; margin: 8px; border: 1px solid #888;
}
.box {
height: 80px;
margin-bottom: 8px;
background: #ddd;
}
Note: twitter bootstrap css included.
Hope it helps.
Use display: inline-block; for .navbar-inner like this Demo
Explanation: using display: inline-block; won't take up the extra space which your navigation bar was using before, horizontally as well as vertically... :)
CSS
.navbar-inner {
display: inline-block;
}
Edit: If you want your navigation menu to be 100% of width than do it like this
Demo 2
CSS
.navbar-inner {
overflow: hidden;
}
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>
I have an image and some text. I want to center both of them vertically in <div>.
How can I do this while NOT changing anything in the <img> tag?
I know lots of people suggest the following:
<div>
<img style="vertical-align:middle; height: 30px;" src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>
Because of some reasons, I do not want to change anything in the <img> tag. Can I center both of them by only adding styles in <div> or <span> or other places?
By the way, I also know that some people said the following would work:
<div>
<img height=30px; src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>
But it is not working for me. So any ideas?
Thanks.
Try this - http://jsfiddle.net/J4QJA/
div {
height: 300px;
background: beige;
line-height: 300px;
}
img {
vertical-align: middle;
}
...
UPDATE
In case you can't/don't want to apply ANY styles to the <img> you can use a wrapper - http://jsfiddle.net/J4QJA/3/
HTML
<div class="wrapper">
<div class="image-wrapper">
<img src="http://lorempixel.com/200/100" />
</div>
<div class="image-wrapper">
Lorem ipsum doloe sit amet
</div>
</div>
CSS
div.wrapper {
height: 300px;
background: beige;
}
div.image-wrapper {
display: block;
position: relative;
top: 50%;
margin-top: -50px; /* half of your image height */
line-height: 100px;
width: 200px;
float: left;
}