- This topic is empty.
-
AuthorPosts
-
July 18, 2013 at 11:47 am #46516VoldisParticipant
I am trying to get two vertical rows of images stacked beside each other. The right row seems to be floated properly, but the left row in ie8, is not floating. Rather the images are stacked below right row.
browser shots example:
[http://browsershots.org/screenshots/fbc4a2b61618e561a93d75abfc111e78]( “”)safari example:
http://twintigerusa.com/brands.htmlhtml:
MOD EDIT: HTML Deleted as includes unlinked images.
css:
.poly{width: 300px;height: 200px;float:right;margin-left: 10px; margin-bottom: 10px;border: solid 1px red;}
.rorytroy{width: 300px;height: 200px;float:right;margin-left: 10px;margin-bottom: 10px;border: solid 1px red;}
.nikitasing{width: 300px;height: 200px;float:right;margin-bottom: 10px;border: solid 1px red;}
.boobiesrule{width: 300px;height: 200px;float:right;margin-bottom: 10px;border: solid 1px red;}
.zipstackerz{width: 300px;height: 200px;float:right;margin-left: 10px;margin-bottom: 10px;border: solid 1px red;}
.portec{width: 300px;height: 200px;float:right;margin-bottom: 10px;border: solid 1px red;}
.dangered{width: 300px;height: 200px;float:right;margin-bottom: 10px;margin-left: 10px;border: solid 1px red;}
.fighting{width: 300px;height: 200px;float:right;margin-bottom: 10px;border: solid 1px red;}
July 18, 2013 at 11:52 am #143445Paulie_DMemberBrowser shots link doesn’t work.
Also, the source order of these divs is quite odd.
Why not just create left and right column divs and put the respective items in each?
Alternatively, they could all float left and, with the right widths etc they would just naturally sort themselves (assuming you could fix the sort order issue).
EDIT: if they were all in proper wrapper…which they aren’t.
Oh and that CSS is incredibly repetitive…you could tidy that up quite a lot.
July 18, 2013 at 11:55 am #143446July 18, 2013 at 12:08 pm #143447VoldisParticipantCould you show me a brief example?
July 18, 2013 at 12:15 pm #143449Paulie_DMemberNot precisely how I would do it but here’s one I stole from an **old** article : here:http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs.htm
http://codepen.io/anon/pen/Bgdnt
You would just have to tweak some number etc.
July 18, 2013 at 12:21 pm #143486VoldisParticipantthank you i will take a look!
July 19, 2013 at 1:29 pm #143741VoldisParticipantHi Paulie _D,
It looks like that layout advice worked! It’s working in ie7 and 8 now. Thanks.I had another question regarding a horizontal line. I would like a dotted horizontal line to appear at the bottom of my pages(above the contact us, about us and follow us) like the one that is located below my navigation bar. What would be the best way to achieve this??
July 19, 2013 at 1:35 pm #143742Paulie_DMemberAre you committed to the red borders?
July 19, 2013 at 1:38 pm #143744VoldisParticipanthaha no that just so I can see the layout
July 19, 2013 at 1:40 pm #143745Paulie_DMemberLooks like you’ve started a new thread anyway.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.