Please refer to image i have attached for better understanding, May be my problem can be adjusted through css, Please help
Regards
Its the simple issue. This is happening because of the uneven height of your picture with text. Try giving min-height to the div.
Eg: .somediv{ min-height: 200px;}
Recommented If you want to set the height dynamically use simple piece of javascript.
equalheight = function(container) {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).resize(function() { //to work in resize
equalheight('.somediv');
});
$(document).ready(function() {
equalheight('.somediv');
});
This code will give equal height to all divs and keep the images well aligned