Divs refuse to align

Question

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]

Which code would you like me to show? Forgive me, but all I really do is add HTML to a page and if I want to change something, add it to custom.css — Charly, Jul 18 '14 at 21:20
"…which comes with a custom css to make changes in"—can you show us this custom CSS as it currently stands? Can you show us any HTML and CSS that defines and styles the divs you wish to align? — 2540625, Jul 18 '14 at 21:39
My apologies for being so bad at this. Hope what I've added helps — Charly, Jul 18 '14 at 22:24
It's OK. Is `http://www.printsofitaly.com/tuscany-gallery-2/` the page what you want to change? And you want the light-grey-bordered rectangles containing the photographs and captions to be left-aligned with two or more on a row, space providing? — 2540625, Jul 18 '14 at 22:42
Yes that is one of the Galleries I'm trying to get correct. I have the images sized to where 2 horizontal or 3 vertically oriented, img w/captions/border, will fit on a row. The 4th image on that page is the first one that refuses to align left. Thanks!! — Charly, Jul 18 '14 at 22:53

score 0 · Accepted Answer · answered Jul 18 '14 at 23:05

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).

You're quite welcome. An upvote and checkmark on my answer are always appreciated. And I would recommend Chrome's Dev Tools for element inspections over Safari's and Firefox's, by the way. — 2540625, Jul 18 '14 at 23:19

Divs refuse to align

1 Answers1