Can I create a two-column layout that fluidly adapts to narrow windows?_问答_开发者

Can I create a two-column layout that fluidly adapts to narrow windows?

开发者 https://www.devze.com 2023-02-02 01:15 出处：网络

I\'m trying to design a page that has two columns of content, div#left and div#right. (I know these aren\'t proper semantic identifiers, but it makes explaining easier) The widths of both columns are

相关专题：css layout

I'm trying to design a page that has two columns of content, div#left and div#right. (I know these aren't proper semantic identifiers, but it makes explaining easier) The widths of both columns are fixed.

Can I create a two-column layout that fluidly adapts to narrow windows?

Desired result - Wide viewport

When the viewport is too narrow to display both side-by-side, I want #right to be stacked on top of #left, like this:

Can I create a two-column layout that fluidly adapts to narrow windows?

Desired result - narrow viewport

My first thought was simply to apply float: left to #left and float: right to #right, but that makes #right attach itself to the right side of the window (which is the proper behavior for float, after all), leaving an empty space. This also l开发者_C百科eaves a big gap between the columns when the browser window is really wide.

Can I create a two-column layout that fluidly adapts to narrow windows?

Wrong - div#right is not flush with the left side of the viewport

Applying float: left to both divs would result in the wrong one moving to the bottom when the window was too small.

Can I create a two-column layout that fluidly adapts to narrow windows?

Wrong - div#right is not on top of div#left

I could probably do this with media queries, but IE doesn't support those until version 9. The source order is unimportant, but I need something that works in IE7 minimum. Is this possible to do without resorting to Javascript?

Add an outer container to the 2 columns which is floated left, but without a specific width.

Check the fiddle.

This gets you pretty close (disclaimer: I only tested it in Chrome and Firefox), using CSS only:

<html>
<head>
<style type="text/css">
div.main1{ width: 40%; 
    min-width:200px;
     height: 400px;
    border: solid 1px black;
    display:inline-block;
}
div.main2{ width: 40%; 
    min-width:200px;
     height: 400px;
    border: solid 1px black;
    float:left;
}

</style>
</head>
<body>
<div class="main1">right div</div>
<div class="main2">left div</div>
</body>
</html>

The trick is the inline-block display style... Someone else might be able to build on this and do better, but I think it's close.

Aerik

<html>
<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
    google.load("jquery", "1.4.4");
</script>

<style type="text/css">
    /*html body { height:100%; }*/

    #left { width: 500px; margin: 0 6px 0 6px; background-color:Blue; }
    #right { width: 500px; margin: 0 6px 0 6px; background-color: Orange; }
    #container { width: 1024px; }
</style>

<script type="text/javascript">

    $(function () {
        setUpFloats();

        $(window).bind("resize", setUpFloats);
    });

    function setUpFloats() {
        if ($(window).width() <= 1024) {
            $('#container').css('width', $('#right').width());
            $('#container').css('padding-left', '12px');
        } else {
            $('#container').css('width', 1024);
            $('#container').css('padding', '0');
        }
    }

</script>

</head>

<body>

<div id="container" style="float:left;">
    <div id="right" style="float:right;">right</div>
    <div id="left" style="float:right;">left</div> 

</div>

</body>
</html>

EDIT:

I fixed it so the orange (right) is on top. silly me got confused which image was right.

EDIT 2

Fixing padding

This is not possible. It's the way HTML works (or does not work :P ).

At least not a way I know of.

You'll always have space at the left side I guess.

I'll try some things though and let you know if I find something.