CODEWITHSUNDEEP
htmlcss
Daniel Williams
Daniel Williams

Reputation: 2317

Responsive div behaviour on browser resize

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Collecto UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->

<style type="text/css">

    .header_select_container {
        float: left;
        overflow: hidden;
        border: 1px solid red;
    }

    .header_select_label {
        background-color: yellow;
        float: left;
        overflow: hidden;
        padding: 0px 20px 0px 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 205px;
    }

    .header_select_arrow {
        background: #83a0a8;
        float: right;
        width: 23px;
    }

    /* 983 */
    @media screen and (max-width: 983px) {
        .header_select_container {
            float: none;
        }
        .header_select_label {
            width: auto;
        }
    }

</style>

</head>
<body>

<div class="header_select_container">
    <div class="header_select_arrow">^</div>
    <div class="header_select_label">
        This is a Menu Item in the menu and an ellipsis will be added when resizing
    </div>
</div>

</body>
</html>

This is driving me a bit crazy. On fullscreen the divs behave as they should.

On resizing down to 983 pixels things go funny. I want the yellow field to take up the full width of the parent div, and the text to auto-scale according to the available width (adding an ellipsis for overflow). Obviously the green box should stay floating on the right.

Appreciate any help.

Upvotes: 0

Views: 200

Answers (1)

Kyojimaru
Kyojimaru

Reputation: 2724

It's because you're using float: left for .header_select_label

just remove it and change it to this

margin-right: 23px;

23px is because the width of .header_select_arrow is 23px

Here's the updated FIDDLE

Upvotes: 1

Related Questions