DarkxPunk Posted August 8, 2013 Share Posted August 8, 2013 (edited) Hey, been awhile... So I am playing around with fluid/responsive website design and I have hit a block relating to Max-Width being ignored when using Float. I know this is just how it is (honestly I can't understand the logic of why though), but is there a way around it? Simply I got this: <div id="wrap"><div id="left">Content</div><div id="right">Content</div></div> #wrap {width: 900px;}#left,#right {max-width: 450px;min-width: 320px;float: left;} The result is both #left and #right become 320px wide divs floating left... To outline quickly what I want to happen just incase I am approaching this all wrong... I want the two divs side by side until both of them squeeze down to 320px as a result of a different device screen size or the shrinking of a browser window. After this the right div will drop under the left div and they both will resize to fill the remaining space until again they are squeezed down to 320px... Thanks for any input. Edited August 8, 2013 by DarkxPunk Link to comment Share on other sites More sharing options...
DarkxPunk Posted August 8, 2013 Author Share Posted August 8, 2013 So... I figured it out, just after I posted this... The solution is so simple I now feel stupid, but I doubt I will be the only one to make this silly mistake, so I will keep this posted incase someone needs it... Now the solution... Since divs with max-width and floats can't do this, the solution is @media queries. #left,#right {width: 50%;float: left;}@media screen and (max-width: 640px) {#left,#right {width: 100%;min-width: 320px;float: none;}} Now how does this work? Well basically so long as the page is larger than 640px (min-width: 320px * 2) than the float: left with a 50% size will keep both left and right side by side and over 320px in width each. Great. Now once you pass this 640px limit (say when you resize the browser or use a iPhone in landscape, or portrait) then the float turns off, drops the right div underneath and it fills the rest of the screen's width. What are the uses, well in my case I have a logo on the left of my page, and a navigation bar on the right. As soon as the page shrinks I need to keep them both visible and consistent looking, especially since my navigation bar looks like tabs. So when it gets too small to fit my nav bar it will just drop it down and fit. Yay. Link to comment Share on other sites More sharing options...
davej Posted August 8, 2013 Share Posted August 8, 2013 (edited) Interesting. I wonder if there is any other way to accomplish that? The @media rule seems perfect for this. I've verified that you can do it with Javascript, but it is messy. Edited August 9, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now