Solved

Div is getting pushed at the bottom when resizing winodw

Posted on 2007-03-30
9
602 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
push Book Today button to right 10 39
How to show span when clicked on? 10 32
Mouse event to control image and transparency. 4 36
Change Firefox bookmarks menu font size 2 34
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

820 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