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.

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

Answers


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.


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


Need Your Help

UIImageView in Storyboard memory issues - Custom Segues pushViewController

iphone xcode memory uiimageview uiimage

I've having some memory issues using ARC in Xcode 5.1.1. I've got several full-screen images in Storyboard in UIImageViews and each time it segues into that View, the image is reloaded and never re...

to build iOS apps from command line with different info.plist files

ios objective-c command-line

I want to build my iOS app from command line along with parameters that i can give to use the appropriate info.plist file. Can this thing be established? ie. giving different info.plist files for