Div is getting pushed at the bottom when resizing winodw

Hi,

I have a menu on the left,
then I placed a content next to this menu (#content div) with a left margin to put it next to it.

When the window is maximized  there is no problem,
but when u resize the window in smaller window,
the content is pushed at the bottom,
Try my sample code :

<html><head><title>Test</title></head>
<style>
      *{margin:0px;padding:0px;}
      #container {
            background-color:red;
      }
      #menu {
            width:180 px;
            height:800px;
            background-color:blue;
            float:left;
      }
      #content {
            background-color:yellow;
      }
</style>
<body>
<div id="container">
      
      <div id="menu">aaaa</div>
      
      <div id="content">
            <form method="post" action="myAction.php"">
                  <p>
                  <select size="5" name="collection" style="width: 500px" id="idCollectionSelect">
                        <option value="test 1">Test 1
                        <option value="test 2">Test 2
                        <option value="test 3">Test 3
                  </select>
                  <br/>
                  <input value="Test" type="submit"/>
                  </p>
            </form>
      </div>
      
</div></body></html>

So this is not very ergonomic ....

Related to the question, why can't I see the red background color of #container ?

(TName told me a div parent doesn't fit its children divs if they are all floated,
but in my case the #content div isn't floated)


Thank u for any help .
LVL 9
matthew016Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ArgblatCommented:
To stop your elements from getting pushed to the bottom add white-space: nowrap to your #container element

#container {
     background-color:red;
     white-space: nowrap;
}

You can't see the red background of #container because #menu and #content have their own colors and are sitting on top of (blocking out) #container

Try removing the background color from #content and you will see that the red shines through

0
klykkenCommented:
Hi matthew,
If you float elements like this you can stop elements from being pushed down by setting width on the main control div (container). You can change the width of #container of this to suite your taste.

You couldn't see the red background because one of the elements was floated. To fix this I added a div with style to clear the floats.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Matthew</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
<!--
* { margin:0px; padding:0px; }
#container { background-color:red; width: 760px; }
#menu { width: 180px; height: 800px; background-color: blue; float: left; }
#content { background-color:yellow; }
.clearer {
 height:1px;
 overflow:hidden;
 margin-top:-1px;
 clear:both;
 display: block;
}      
-->
</style>
</head>
<body>
<div id="container">
      <div id="menu">aaaa</div>
  <div id="content">
        <form method="post" action="myAction.php"">
          <p>
            <select size="5" name="collection" style="width: 500px" id="idCollectionSelect">
              <option value="test 1">Test 1
          <option value="test 2">Test 2
          <option value="test 3">Test 3
         </select>
                        <br>
                        <input value="Test" type="submit"/>
                  </p>
            </form>
      </div>
      <div class="clearer"></div>
</div>
</body>
</html>

-klykken
0
TNameCommented:
>You couldn't see the red background because one of the elements was floated

Yes, and the solution is indeed to clear the float at the bottom.
But let me explain the problem with the red background in greater detail, because it's important and it doesn't seem to be clear yet.

You have a wrapper containing a tall floated element and a short non-floated one. The parent will expand to hold the non-floated element, but not one single pixel more. And there the red background of the container is hidden by the yellow background of content (as Argblat correctly stated). If you want the parent to hold both, then you have to clear the float at the bottom.
Remember, in order for the parent to atretch to contain all it's children, the last/tallest/highest has to be non-floated...
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

TNameCommented:
atretch = stretch
0
matthew016Author Commented:
Hi,
sorry for the late response,
I justed tested it :

@Argblat:
 white-space: nowrap; in #container   doesn't work,
my content is getting pushed at the bottom.

@klykken:
but I want the #container to be stretched for the viewport's width.

@TName
Thank u for the nice explanations on the background
0
klykkenCommented:
>but I want the #container to be stretched for the viewport's width.
You did not mention that. I'll see what I can do.
0
TNameCommented:
Guess I should have posted this 4 days ago, but I thought klykken's solution is identical to mine, so I didn't. Try this:


<html><head><title>Test</title></head>
<style>
      *{margin:0px;padding:0px;}
      #container {
            background-color:red;
      }
      #menu {
            width:180 px;
            height:800px;
            background-color:blue;
            float:left;
      }
      #content {
            background-color:yellow;
      }
</style>
<body>
<div id="container">
     
      <div id="menu">aaaa</div>
     
      <div id="content">
            <form method="post" action="myAction.php"">
                  <p>
                  <select size="5" name="collection" style="width: 500px" id="idCollectionSelect">
                        <option value="test 1">Test 1
                        <option value="test 2">Test 2
                        <option value="test 3">Test 3
                  </select>
                  <br/>
                  <input value="Test" type="submit"/>
                  </p>
            </form>
      </div>
<div style="clear:both"></div>
     
</div></body></html>
0
TNameCommented:

Sorry, that was the wrong one.
This is what I meant, it only works in FF - but the reason I wanted to post it is that the original post states:

"then I placed a content next to this menu (#content div) with a left margin to put it next to it."

I couldn't find that margin, and that margin is exactly what's missing for FF!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>Test</title></head>
<style>
      *{margin:0px;padding:0px;}
      #container {
            background-color:red;
      }
      #menu {
            width:180px;     /*  corrected typo, space before "px"  */
            height:800px;
            background-color:blue;
            float:left;
      }
      #content {
            background-color:yellow;
            margin-left:180px;              /*  added margin  */
      }
</style>
<body>
<div id="container">
     
      <div id="menu">aaaa</div>
     
      <div id="content">
            <form method="post" action="myAction.php"">
                  <p>
                  <select size="5" name="collection" style="width: 500px" id="idCollectionSelect">
                        <option value="test 1">Test 1
                        <option value="test 2">Test 2
                        <option value="test 3">Test 3
                  </select>
                  <br/>
                  <input value="Test" type="submit"/>
                  </p>
            </form>
      </div>
<div style="clear:both"></div>
     
</div></body></html>
0
TNameCommented:
Another possibility - works in FF and IE6 -  position the menu absolutely instead of floating it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>Test</title>
<style>
html,body{width:100%;}

      *{margin:0px;padding:0px;}
      #container {
            background-color:red;
            height:800px;
      }
      #menu {
            width:180px;
            height:800px;
            background-color:blue;            
            position:absolute;
            top:0;
      }
      #content {
            background-color:yellow;            
            margin-left:180px;
      }
</style>
</head>
<body>
<div id="container">            
      <div id="content">
            <form method="post" action="myAction.php"">
                  <p>
                  <select size="5" name="collection" style="width: 500px" id="idCollectionSelect">
                        <option value="test 1">Test 1
                        <option value="test 2">Test 2
                        <option value="test 3">Test 3
                  </select>
                  <br/>
                  <input value="Test" type="submit"/>
                  </p>
            </form>
      </div>
<div id="menu">aaaa</div>  
</div></body></html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.