Jump to content

[SOLVED] Max-Width and Float


DarkxPunk

Recommended Posts

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 by DarkxPunk
Link to comment
Share on other sites

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

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 by davej
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...