htmlwordpressimagealignmentcaptions

Divs refuse to align

I'm fairly new to CSS / HTML, but usually can figure something out. Not with this issue though... I've spent 2 days trying to fix it with no joy

Using WP 3.9.1 and WooThemes Mystile which comes with a custom css to make changes in; no child theme needed. When I place images with captions on a page using left align, some will and others vigorously refuse. In older WP, it was always align all images left to create rows, but not with 3.9.1 it seems. I've tried everything I can think of, but those images that are supposed to be aligned left are actually right of center.

Using Firebug or Safari Inspector, I've tried to align them left and even using a negative margin-left will not place the image where it belongs. It's almost like there's some kind of page break, for lack of a better term, that is making it set right of center. Like it thinks that position is left.

I am not using any gallery or plugin, just adding images to the pages with captions in the text box, not visual. Most of my Galleries under Store are a mess. :(

Here's an example of one: Tuscany Gallery Most of the Galleries I want 2 landscape in a row or 3 verticals. Sometimes with an odd number of images I might center 1 - 3 images, but most are left align.

Any help would be very appreciated! Thanks!

Re: the Body css code

I have a few color changes and more div#attachmet_number (didn't think you needed all them), but this is about it.

:active, :focus { 
outline-style: none !important; 
-moz-outline-style:none !important; 
}

a {
outline-style: none;
-moz-outline-style: none;
}

a:before {
outline: none !important;
}


a:imag { 
outline: 0px none; 
}

#sidebar .post-46 {
display: none !important;
}

article.post-46 img.alignleft {
margin: 0 1.618em 1em 16px;
} 

.post .alignleft, .type-page .alignleft {
margin-bottom: 50px;
}


.post-282 .wp-caption img, .type-page .wp-caption img {
margin: 0 0 0 0.4em;
}


div#attachment_283 {
margin-left: 42px;
}

div#attachment_286 {
margin-left: 42px;
}

div#attachment_291 {
margin-left: 42px;
}

I'm not quite sure if that's what you need or not. The div#attachment_number is the image within a box with caption (title) below it.

HTML of images with caption

[caption id="attachment_516" align="alignleft" width="407"] Duomo di Pisa[/caption]

Solution

  • Following your comments above on your question, your fourth photo (Autumn Drive) specifically is getting pushed to the right by the bottom edge of your second photo (Duomo di Pisa).

    enter image description here

    It appears that you've added a specific width to each div in your HTML. If you were to add there also a specific, equal height to each div, then they would align and allow the divs below to float to the left.

    enter image description here

    A greater ideal might be to declare a class for your landscape-oriented divs in your CSS, define a uniform width and height there, and assign that class to all landscape-oriented divs. That way, you could easily change that width and height in one place, and it would apply to all divs with that class assigned (and multiple classes can be assigned to a single div; just separate them by spaces, like class="landscape framed dark" for example).