How to make 2 divs float, left div with fixed right margin?

lorijackal

New Member
I actually don't know how to name my question. But I will explain what I need to do.HTML is simple as this:\[code\]<div id="left_div"></div><div id="right_div"></div>\[/code\]I need \[code\]left_div\[/code\] to be on the left, to have 100% width, but with fixed right margin 320px. \[code\]right_div\[/code\] has fixed width 300px and must be alongside \[code\]left_div\[/code\]. I know I can do this very easily, when I would do this:\[code\]<div id="right_div" style="float:right;width:300px"></div><div id="left_div" style="margin-right:320px;"></div>\[/code\]But the problem is that I need HTML to be as I mentioned before. The order of \[code\]DIVs\[/code\] matter. If someone wonders why, it's because I am working on responsive website, where I need, when the viewport is too narrow, the \[code\]right_div\[/code\] to be below \[code\]left_div\[/code\]. And that I can't do with simple solution I have put above.I hope my question makes sense and I am thankful for any answers or helpful hints.Oh, and I forgot to mention I need this to be pure HTML+CSS, no JS. And I don't need to support IE7 and below.UPDATE:\[code\]left_div\[/code\] must be width:auto and right margin must be fixed (e.g. 300px).
 
Back
Top