CODEWITHSUNDEEP
htmlcss
Himberjack
Himberjack

Reputation: 5802

preventing from float div to wrap

I have 

    <div id="containter"><div class="column" id="left">
left</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

Upvotes: 0

Views: 449

Answers (5)

Anish Joseph
Anish Joseph

Reputation: 1026

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

Upvotes: 0

seedg
seedg

Reputation: 21975

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>

Upvotes: 0

Shikiryu
Shikiryu

Reputation: 10219

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)

Upvotes: 0

ace
ace

Reputation: 6835

You may try to add a width your container div.

Upvotes: 1

Tee Wu
Tee Wu

Reputation: 579

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

Upvotes: 0

Related Questions