Solved

Div is getting pushed at the bottom when resizing winodw

Posted on 2007-03-30
9
601 Views
Last Modified: 2012-06-27
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 .
0
Comment
Question by:matthew016
9 Comments
 
LVL 5

Assisted Solution

by:Argblat
Argblat earned 50 total points
ID: 18823737
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
 
LVL 8

Assisted Solution

by:klykken
klykken earned 100 total points
ID: 18823762
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
 
LVL 28

Expert Comment

by:TName
ID: 18823876
>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
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 28

Expert Comment

by:TName
ID: 18823883
atretch = stretch
0
 
LVL 9

Author Comment

by:matthew016
ID: 18842167
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
 
LVL 8

Expert Comment

by:klykken
ID: 18842450
>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
 
LVL 28

Expert Comment

by:TName
ID: 18843988
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
 
LVL 28

Expert Comment

by:TName
ID: 18844625

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
 
LVL 28

Accepted Solution

by:
TName earned 350 total points
ID: 18844648
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

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 72
JavaScript/CSS: Detect if hue-rotate supported by browser 1 37
Objects on Same Line 2 30
SlickNav Menu Plugin Not appearing on mobile 6 33
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question