CSS float and markup order - Can I have my cake and eat it?

SnormaGon

New Member
I'm creating a responsive ecommerce site and I'm designing a modal dialog for adding things to the basket. I want my markup to be in this order:\[code\]<div class="modal"> <div class="item"><!-- Product info --></div> <div class="quantity-discounts"><!-- Details of quantity discounts --></div> <div class="add-to-basket"> <select name="quantity"> <option value="http://stackoverflow.com/questions/13859246/1">1</option> <option value="http://stackoverflow.com/questions/13859246/2">2</option> <!-- ...and so on --> </select> <a href="http://stackoverflow.com/questions/13859246/#" class="button">Add to basket</a> </div></div>\[/code\]On large screens I want the \[code\].item\[/code\] and the \[code\].quantity-discounts\[/code\] div to be on the left and then the \[code\].add-to-basket\[/code\] section floated to the right.I want to maintain the order of the divs because on small screens they won't float side by side, they will stack in the order they appear in the markup which is exactly what I want.The problemFor reasons I don't fully understand the \[code\].add-to-basket\[/code\] div is floating to the right but only after the \[code\].item\[/code\] div therefore leaving a gap the height of the \[code\].item\[/code\] div above it. The only way of getting it to render how I want is to put the \[code\].add-to-basket\[/code\] div 2nd in the order of divs but then when they stack on small screens the quantity discounts will be shown under the add to basket button which is not what I want.I've done a stripped back version as a jsfiddle http://jsfiddle.net/2g9TA/1/CSSCSS wise I'm floating \[code\].item\[/code\] and \[code\].quantity-discounts\[/code\] to the left and setting their width at 66% with a 2% right margin. I'm then floating \[code\].add-to-basket\[/code\] right and setting it's width at 30%.What I've triedI've tried adding a negative margin to \[code\].add-to-basket\[/code\] but because the site is responsive and fluid this margin alters in relation to everything else whether I set it in percentages or pixels.I'm now out of ideas.
 
Back
Top