Container floating problem

Question

sketch

Hey, I have a big problem with my container-sketch. How can I realize this ? When I set the width from the two navigations (blue container) there are under the logo (red container). The two navigation will run across the screen, right next to the logo. If I resize the browser window, the two navigations should NOT slide under the logo. Has anybody a example for me ?

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>New</title>
    <style type="text/css">

        .logo {
            float: left;
            width: 260px;
            height: 50px;
            background: green;
        }

        .nav-main {
            background: red;
        }

        .nav-sub {
            background: blue;
        }

    </style>
</head>

<body>
    <div class="header">
        <div class="logo">
            .logo
        </div>
        <div class="nav-main">
            .nav-main
        </div>
        <div class="nav-sub">
            .nav-sub
        </div>
    </div>

</body>

see http://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line — schellmax, Apr 05 '11 at 07:59

score 1 · Accepted Answer · answered Apr 05 '11 at 08:58

1

.header{
 min-width:320px;  
}

check example

answered Apr 05 '11 at 08:58

Arthur Halma

3,943
3
23
44

score 1 · Answer 2 · answered Apr 05 '11 at 08:59

1

Try adding width to the nav-main and nav-sub

See http://jsbin.com/isuxu4 for a demo

answered Apr 05 '11 at 08:59

Clyde Lobo

9,126
7
34
61

Container floating problem

2 Answers2