CODEWITHSUNDEEP
htmlcss-floatcss
Googlebot
Googlebot

Reputation: 15673

How to use min-width for "float:right" element in CSS?

Look at this example

The html does not respect min-width as long as we have float:right in the CSS rules

.right {
    float:right;
    background:blue;
    min-width:400px;
}

If removing the float:right or changing it to float:left, then the html element will not be narrower than the min-width.

How we can use min-width for an element floated right?

Screenshot: As commented by some fellas, this is what I see on the latest version of Chromium on Debian.

enter image description here

As you can see the left side of the div including its content is invisible (in other words, outside the visible part).

Upvotes: 2

Views: 6682

Answers (2)

ralph.m
ralph.m

Reputation: 14345

The right-floated div is doing just what it is told to in the original example: it is remaining at least 400px wide. If the viewport is reduced to less than 400px, part of the div is obscured, because it's not allowed to get any narrower than 400px. So the question is, what behavior do you really want here? Perhaps what you really want here is a non-floated wrapper element that has a min-width of 400px?

EDIT: Here's an example of how a non-floated wrapper will make it work:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
body {
    background:red; 
    margin: 0; 
    padding: 0;
}

.wrap {
    background:#e7e7e7; 
    min-height: 600px; 
    min-width: 400px;
}
.right {
    float:right;
    background:blue;
    min-width:400px;
}
</style>

</head>
<body>
<div class="wrap">
    <div class="right">
    TEST
    </div>
</div>

</body>
</html>

The wrapper could of course be colored red. I just made it gray so it was easy to see.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

div is a block level element, by default it will take up 100% space..

Alternatively if you want to see only 400px element instead of 100% width you can use display: inline-block, or specify a fixed width to it.

Demo

Note: If you don't want to use display: inline-block; you can just keep it the way it is, if you minimize the window, you'll see a horizontal scroll bar so if you think that using min-width will only show element with a width of 400 px than you are wrong, it is min and not max

Upvotes: 1

Related Questions