2

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).

Improve this question
10
  • 1
    I see it fine in the latest Chrome on Mac. Commented May 1, 2013 at 12:50
  • Even I see it fine on Chrome on iMac Commented May 1, 2013 at 12:51
  • 1
    perfectly working on firefox 20 Commented May 1, 2013 at 12:51
  • @PedroEstrada I added a screenshot to show my problem. Commented May 1, 2013 at 12:55
  • It worked correctly for me too, latest Chrome on Win 8. Commented May 1, 2013 at 12:56

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

When reducing the window width to less than 400px, I expect horizontal scroll to make the entire div visible, like the case of float:left.
The browser will never scroll left of X co-ordinate 0.
I've updated my post with an example of how to do it with a non-floated wrapper element.
1

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

Improve this answer

4 Comments

When you make float a block element, it acts as inline-block element, so there is no need to explicitly make element as inline-block.
@Mojtaba Exactly, but I just made that to explain him :)
It is not matter of using inline-block, I need to use float:right, as I want to display the div on the right side (when the window width is much larger than the min-width.
@All Ya so you can use it safely, there's no issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.