How to set the div must in the bottom using CSS? - html

This is the div for my product, you can see the demo like this:
<div class="productItem">
<div>
<!--image -->
</div>
<div>
<!--text -->
</div>
</div>
http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg
Each product has a product image and product text. The image is on the top, and the text is under each image. But you can see that, image can have different size, so I don't want the text always in the bottom instead of just below the image. How can I layout the text must in the bottom, except from assigning the absolute position.

It might be worth considering making your images a standard size. Perhaps a large and a smaller size? You could always have an option to show a larger image when someone clicks on the smaller one?
You could also simplify your HTML using something like this:
<div class="productItem">
<img class="large" />
<p>Text</p>
</div>
This would let you change the CSS depending upon the image (by giving it a class), and reduce unnecessary div's.
Perhaps force the image to display above the text using the block attribute?
img {display:block;}

I must be missing something because this seems fairly simple.
<style type="text/css">
.productItem {
text-align: center;
}
<div class="productItem">
<img src="whatever"><br style="clear: both;" />
Text
</div>
Perhaps there's more that I'm not understanding.

From your screenshot, it looks like your text is always below the image, but in the right half of your screenshot, when a small image is in the same row as a larger image, the text isn't lining up (the product descriptions aren't at the bottom of the cell). Is that what you're asking about? How to get the text all aligned to the bottom of the row when the image size varies?
You could set the table row that's containing all the products to be <tr valign="bottom">, which will push everything to the bottom, stacking the images on top of the text. This would mean that the small images would all have their bottoms aligned with each other, not their tops. If you want the images to stay up, but the text to go down, instead style the image DIV like this: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. This will create a larger placeholder for smaller images such that the text beneath them all lines up, and if an image is too big, it will get cropped rather than stretch out and cause the text to get all out of line.

i assume you have a container for productItem
so it should be something like that:
<div class="productList">
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
</div>
i don't know why you dont want to use absolute positioning but that's only solution in this case (without giving fixed height to image or divs).
This setting would not hurt anything and will work on all common modern browsers including ie6.
All you need to do is give a different classname for product text or use different tag for addressing it.
css:
.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}
try this. should work perfectly
other solution is written above by MidnightLightining. using fixed height for image container.

Related

Overlapping Div Sections, can't figure out why

I am trying to create a contact section at the bottom of my bootstrap website, with a col-md-3 containing a picture, and col-md-9 beside it carrying the infomation
Except when i make the window smaller the text begins to overlap the picture instead of sitting under or beside it
I have tried making the image responsive, and looking at other ways of keeping it alongside but i cant figure out the issue.
Im sure i am missing something really simple, an would greatly aapprecite any help
I have searched this website for overlapping div issues, and tried a few things but nothing seems to work
<section class="contact bg-grey" id="contact">
<div class="container">
<h2 class="contact-header">Contact Me:</h2>
<div class="row">
<div class="col-sm-3">
<img src="img/me.png" class="responsive" id="bio">
</div>
<div class="col-sm-9" id="contact_details">
<h3 class="contact-header">John Gillespie</h3>
<p>Email: johngillespiexxx#gmail.com</p>
<p>Phone: 07xxxxxxxxx</p>
<p>Twitter: #jxhngillespie</p>
</div>
</div>
</div>
</section>
I was expecting when the page size shrinks that the image would shrink with it, or that the text would stay along side, until the screen becomes too small and then fall underneath. Instead of this happening the text begins to overlap the image
If you add style="max-width: 100%" to the img, it will prevent the image from overflowing outside of its column (the 100% is relative to the width of the column). By default, images always display at their full resolution unless you constrain them in this kind of way.

Divs Overlapping: How to push one with position:absolute under the other when they overlap

I have two divs (the left one is an image) inside a wrapper that are meant to be next to each other, the div on the right being positioned absolute with right:0 and bottom:0 so it positions to the bottom of the div image on its left. The issue is, when the screen gets small enough the position absolute one overlaps the image. I have added a div that just occupies space in the wrapper and I've avoided the overlap, but now when you make the screen smaller the div goes under the image but it doesn't reposition itself right underneath; it shifts to the right. Here is an example on JSfiddle:
http://jsfiddle.net/xbdsq7zj/
Here is the html:
<div class='ideaside'>
<div class='ideaphoto'>
<img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
</div>
<div style="float:left; width:150px; height: 120px;"> </div>
<div class='ideainfo'>
<p clas='glyphicon glyphicon-star unclickable'></p>
<span>Followers</span></p>
<p><strong>
Phase 1
</strong></p>
<p>By <%= render #idea.user %></p>
<i>2 hours ago </i>
</div>
</div>
<br>
<p class='doc'>
<b>Brief:</b>
t's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
</p>
Here is the css:
.ideaphoto {
float:left;
}
.ideainfo {
position:absolute;
bottom:0;
right:0;
}
.ideaside {
position:relative;
overflow:hidden;
}
I'd like it to go to reposition so that it is directly under the image rather than next to some whitespace under the image. Is that possible without using Jquery collision detection?
Thanks.
Edit: I am using Bootstrap, and this is all taking place in col-md-4. The image is always 200px, but the text div's width is sort of variable depending on the user's name.
I think bootstrap's function, (assuming your using bootstrap for this because of the glyphicon) will be of use to you. You don't have to use float anymore because bootstrap will do it for you.
<div class="row">
<div class="col-md-6 col-sm-12 ideaphoto"> <!--If viewport is regular it will take up half of the page. But if viewport is smaller it will consume a row, thus repositioning the .ideainfo below it.-->
<!--Enter your Image code here.-->
</div>
<div class="col-md-6 col-sm-12 ideainfo">
<!--Enter your IdeaInfo here.-->
</div>
</div>

How to style an image with text block?

I'm looking to create a style I can reuse that will create the following layout.
Place an image and float it left, then have text with or without paragraph tags that are positioned to the right of said image. The text will be aligned to the top of the image on the left.
I can achieve everything except the text isn't positioned at the top. Here is what I have so far, the text being centered and not top aligned.
<div style="overflow:auto">
<div style="float:left">
<img src="Images/img.jpg" />
</div>
<div>
<p>this is some text that is getting centered along the img height</p>
<p>Some more text... </p>
</div>
</div>
example of what this does. I need the 3 paragraphs aligned to top of image and 4th how it is already.
example http://www.spokanewastewater.org/Images/untitled.jpg
I would do 2 things for this.
On your first paragraph tag, add the styles below. This will remove the spacing that is caused by the first paragraph tag.
<p style="margin-top:0;padding-top:0"></p>
And on the image, the style below. Sometimes if you don't set a vertical align the image will be off a little. But I would need to see a JSFiddle to see how yours is rendering.
<img style="vertical-align:top">
Also, I should add that this should be done with an external CSS sheet and not inline, if possible.

Grid System Order in Boostrap 2

I have a problem with the Grid System of Bootstrap 2.
I want to make a header with some text, and an image on the right of it.
Therefore I made a row, and put a span8 and a span4 inside of it.
However, when the window gets too small for the content to be displayed side by side, I want the span4 div to come before the span8 div.
<div class="hero-unit">
<div class="container">
<div class="row">
<div class="span8">
This is some text
</div>
<div class="span4">
<img src="image.png" alt="" />
</div>
</div>
</div>
</div>
How can I do this?
So in other words, how can I change the order of the divs.
If I'm not completely mistaking, there is no such thing described in the documentation.
You can do it with media queries and floats.
Should look somewhat like this:
<div class="span4 pull-right"><!-- Image here --></div>
<div class="span8"><!-- Text here --></div>
Now you should use a media query (as seen in the responsive.less file) to switch when the screen size jumps below a specific mark. Then you make sure that the span4's float is removed. You might need to use .row-fluid instead of the usual .row and use your own padding to make it look great.

How to CSS two vertical cylinders

I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.