preventing from float div to wrap_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-29 09:38 出处：网络

I have <div id=\"containter\"><div class=\"column\" id=\"left\"> l开发者_C百科eft</div><div class=\"column\" id=\"right\">right</div></div>

相关专题：css

I have

    <div id="containter"><div class="column" id="left">
l开发者_C百科eft</div><div class="column" id="right">right</div></div>
    .column
    {
    float: left;
    }

Problem is, if i shrink my browser, the right column will wrap. How can I prevent this?

Thanks

You may try to add a width your container div.

Have you ever try float left div to left and float right div to right?

It works for me (example here)

You just forget a " @ id="right> and you must erase / in </div class="column" id="right>

That corrected, I made changes in my example :

http://www.jsfiddle.net/D2TvR/2/

add a width to your container and overflow:auto (else, it won't overflow your floated divs)

Just add a width to your containers (say 50%) and set them to float left. This way, both containers will take only half of the width's screen. That is why you'd better use percentage instead of pixels, as pixels state static width and depending on your question, since you are resizing the browser window, you need to implement the page using fluid width. Here is a working example:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
.column { float: left; width:50%; }
</style>
</head>

<body>
    <div id="containter">
        <div class="column" id="left">
            This is the left container
        </div>
        <div class="column" id="right">
            This is the right container
        </div>
    </div>
</body>
</html>

if you have set your site on percentage then give min-width to the container div so that the inner divs wont wrap So even if you resize it wont wrap