Home floats not stacking beneath eachother
Reply: 1

floats not stacking beneath eachother

user3106358
1#
user3106358 Published in 2017-12-07 21:24:03Z

Using Post Type Builder, I created a CPT called Concerts. On a clean install of the theme on my server, I produced this result, which is structurally correct: https://plushdesign.net/plush8/concert/deck-the-hall/

Each component is set in a unique div within a parent div, and they should all be floating to the right of the photo. The divs are all set to float left.

When I moved the CPT/css over to the development site, the same css displays this: http://spiderman.ephronsystems.com/concert/san-francisco-symphony-presents-deck-the-hall/

How to get the purple button to float down below the details, and the text to wrap beneath it (it will not wrap around the photo, which is the desired behavior). I tried every combination of clearing and display properties but it is very stubborn.

Here is the relevant html:

div class="ptb_items_wrapper entry-content" itemtype="http://schema.org/Article" itemscope="">
<div class="ptb_first_row ptb_row ptb_concert_row ">
<div class="ptb_col ptb_col1-1 ptb_col_first">
<div class="ptb_module ptb_thumbnail ptb_module_inline">
<div class="title ptb_module ptb_title">
<div class="details ptb_module ptb_text ptb_details">
<div class="purchasetickets ptb_module ptb_text ptb_purchase_tickets">
<div class="description ptb_module ptb_text ptb_description">
</div>
</div>

Here is the relevant css:

div.ptb_items_wrapper.entry-content {float:left;overflow:auto;padding-top:2em;border-top:1px solid #ededed;}
div.ptb_module.ptb_thumbnail.ptb_module_inline {float:left;margin-right: 1em;}
div.title.ptb_module.ptb_title {float:left;}
div.details.ptb_module.ptb_text.ptb_details {float:left;/*margin-right: 200px;*/}

div.purchasetickets.ptb_module.ptb_text.ptb_purchase_tickets {float:left;color:#fff !important;}
.purchasetickets { padding: 6px 16px; background: #872c8c;margin:3px 0 12px !important;border-radius: 1.2em;font-size: 14px;text-transform: uppercase;letter-spacing: 2px;color:#fff !important;}
a.purchasetickets, .ptb_purchase_tickets a {color:#fff !important;}
.purchasetickets:hover {opacity:.5;}

div.description.ptb_module.ptb_text.ptb_description {float:left;}

thanks!

Chris Happy
2#
Chris Happy Reply to 2017-12-07 21:43:47Z

Here's the new CSS:

div.ptb_items_wrapper.entry-content {float:left;overflow:auto;padding-top:2em;border-top:1px solid #ededed;}
div.ptb_module.ptb_thumbnail.ptb_module_inline {float:left;margin-right: 1em;}
div.title.ptb_module.ptb_title {}
div.details.ptb_module.ptb_text.ptb_details {/*margin-right: 200px;*/}

div.purchasetickets.ptb_module.ptb_text.ptb_purchase_tickets {color:#fff !important;display: inline-block;}
    .purchasetickets { padding: 6px 16px; background: #872c8c;margin:3px 0 12px !important;border-radius: 1.2em;font-size: 14px;text-transform: uppercase;letter-spacing: 2px;color:#fff !important;}
    a.purchasetickets, .ptb_purchase_tickets a {color:#fff !important;}
    .purchasetickets:hover {opacity:.5;}

div.description.ptb_module.ptb_text.ptb_description {float:left;}

Summary change:

  • Only float the image
  • Apply display: inline-block on the button.

Also, to help others, please add the appropriate tags to your question, as mentioned by @Andrei Gheorghiu. :)

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.349394 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO