issue with css floating and auto width

Question

I have two div's on a page: one floating left and the other right:

.lefttty {
    height: 200px;
    width: auto;
    min-width:200px;
        float: left;}

.rightyyyy {
        height: 200px;
    width:400px;
        float: right;}

What I'm trying to do is expand the div's when the user zooms out but keep them to the right and left at the same time (support all screen res).

Now the issue im having is with the floating and the auto widths...

the left div seems to not be expanding to the screen size, instead it's adjusting to the min-width. So when I preview it, it comes out as 200px (the min-width). When i remove the float, it then expands to the full screen width, like it should. But i need the float there.

I haven't set the right div's width to auto yet as i'm testing the left atm.

any ideas on how to solve this issue?

Answer 1

I do think that if your element is floated and your element has only elements that are no solid (are affected by the flow), the floating element will take the width it's given or the maximum width the element will take.

If your div is empty, the floated div will take no width. And giving him a min-widdh, it will come up with this min-width

And for adjusting to the zoom, I would suggest that you change the width px values for % values in a container that takes 100% browser width. It should move as much when you zoom in or out.

Answer 2

您应该从lefttyy div中删除浮点数，然后它才能正常工作： http : //jsfiddle.net/6g2cn/show