2 blocks responsive design outlining

[timmy01]

On top of the page i have a menu block including a logo lined out on the right.

Underneath this block i have the content block.
If i resize the browser window, the content block doesn't stick to the left side of the window but moves to the right next to the menu-block out of sight.

What is the way to go here?

a small piece of it (the basic) i copy/pasted here:

<style>
#logo {
  max-width: 50%;
  float:right;
  height:45px;
}
#menu_block { 
display: block;
border:1px solid green; 
}

#container {
display: block;
position: relative;
 border: 1px solid #666;
 padding: 5px;
 margin-bottom: 20px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</style>

<section id="options" class="clearfix">
<div id="menu_block">-menu- 
  <div id="logo"> -logo-
  </div>
</div>  
</secion>  
<div id="container" class="clearfix"> 
 -content-
</div>

[DrDoc]

</section>

Is that in your actual code, or just missing when reproducing it here?

[lucy24]

Also: be very, very careful when using floats next to anything with a display set to something other than the default. Make sure there can never be an unwanted collision. You will probably need to switch off the float once you're below a certain size.

[drhowarddrfine]

I don't see the problem. Which browser?

[timmy01]

@drdoc,
I did check in my source if I had a typo in there. But it's just the example put here.

@lucy, i'll keep that in mind. I even read somewhere that float was completely unnecessary. I forgot what the alternative was tho.

@drhoward, (a lot of doctor here :))
it seem to be the #options which i had set to a fixed dimension.
after that the problem was solved

#options {
padding-bottom: 1.0em;
min-height: 80px;
max-width:85%;
}

[drhowarddrfine]

I even read somewhere that float was completely unnecessary.

You mean ever? It must have been a xkcd comic.