Solved

Div is getting pushed at the bottom when resizing winodw

Posted on 2007-03-30
9
599 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
 
LVL 28

Expert Comment

by:TName
ID: 18823883
atretch = stretch
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now