help with css width property WordPress
- SOLVED
I have a post div who's width is set dynamically by the size of the featured image I insert. I want the copy within the post area to stay within the width of the div without stretching it. You can see my issue here: [[LINK href="http://brandyinteraction.com"]]http://www.brandyinteraction.com[[/LINK]]
A bit of background:
The featured image is coded to be 50% of the size of the uploaded image, and I'm using a grid layout which makes use of the jquery masonry script. within the script i've set columnWidth: 100%, which is working fine.
I've tried messing with width:auto and width:inherit but neither of those seem to be working in terms of constraining the div width to that set by the image.
Can this be fixed by css, or is it a php / jquery job and if so, how?
thanks in advance!
Answers (5)
Utkarsh Kukreti answers:
Try this js (worked from firebug)
jQuery('.box').each(function(){
var width = jQuery(this).find('img').width();
jQuery(this).width(width);
});
Utkarsh Kukreti comments:
Also, your columnWidth should be like
columnWidth: '100%',
with the quotes.
Dave Smith comments:
not worked... here's the js in full with your edit included at bottom:
jQuery.noConflict();
jQuery(function(){
jQuery('span.view-large').hide();
myOp = 1;
jQuery(window).load(function(){
// Grid jQuery plugin: http://desandro.com/resources/jquery-masonry/
jQuery('#sort').masonry({
columnWidth: 100%,
animate: true,
itemSelector: '.box'
//easing: 'linear'
},
function() { jQuery(this).css({
margin: '10px'
});
});
// MouseOver Events
jQuery('.box').hover(function(){
jQuery('img', this).fadeTo("fast", 0.75).addClass('box-hover');
jQuery('span.view-large', this).fadeTo("fast", 1)},
function(){
jQuery('img', this).fadeTo("fast", myOp).removeClass('box-hover');
jQuery('span.view-large', this).fadeTo("fast", 0)
});
// Colorbox
jQuery("a[rel='gallery']").colorbox();
});
// box width edit
jQuery('.box').each(function(){
var width = jQuery(this).find('img').width();
jQuery(this).width(width);
});
});
Dave Smith comments:
sorry, didn't see your edit. now included quotes, it seems to be working fine. nice work, thanks for your help.
Utkarsh Kukreti comments:
It breaks due to the 100%. Put that in quotes.
Dave Smith comments:
erm, i needed to add the auto, instead of the '100%'. gonna split the money between you and Jonah, thanks for your efforts.
Jonah Schulte answers:
Actually, the correct fix seems to be to use "auto" instead of "100%" for the columnWidth along with Utkarsh's jQuery solution. If you replace your script.js file with the following code it should work without error:
jQuery.noConflict();
jQuery(function(){
jQuery('span.view-large').hide();
myOp = 1;
jQuery(window).load(function(){
// Grid jQuery plugin: http://desandro.com/resources/jquery-masonry/
jQuery('#sort').masonry({
columnWidth: auto,
animate: true,
itemSelector: '.box'
//easing: 'linear'
},
function() { jQuery(this).css({
margin: '10px'
});
});
// MouseOver Events
jQuery('.box').hover(function(){
jQuery('img', this).fadeTo("fast", 0.75).addClass('box-hover');
jQuery('span.view-large', this).fadeTo("fast", 1)},
function(){
jQuery('img', this).fadeTo("fast", myOp).removeClass('box-hover');
jQuery('span.view-large', this).fadeTo("fast", 0)
});
// Colorbox
jQuery("a[rel='gallery']").colorbox();
});
});
jQuery(document).ready(function(){
jQuery('div.box').each(function(){
var width = jQuery(this).find('img').width();
jQuery(this).width(width);
});
});
With width set to 100%, the layout becomes broken when you resize the browser window.
Galen Gidman answers:
Hello. Does the image size ever vary?
<strong>Edit</strong>: Ok, took a better look at the site and understand your problem now. Working on the answer.
David Navarrete answers:
is posible resize the image?, i have a plugin that resize the imagen with the width or height.
Pippin Williamson answers:
If you don't mind getting your hands a little dirty, try adapting this equal heights jquery solution, but to equal widths.
http://www.cssnewbie.com/equal-height-columns-with-jquery/