asked on

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 .

SOLUTION

Argblat

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

klykken

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TName

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

TName

atretch = stretch

matthew016

ASKER

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

klykken

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

TName

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>

TName

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>

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial