Solved

Div is getting pushed at the bottom when resizing winodw

Posted on 2007-03-30
9
603 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to format numbers and letters in nested lists 5 53
Change box shadow 1 44
CSS Style Effect 2 23
bootstrap wrap text 1 57
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

739 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