Geek Answers Handbook

How to make a floating div disappear for smaller screens?

This is pure html / css Question, here it goes .. I have a floating div to the right of my page layout, I need it to disappear if my screen size is too small (or resize the browser window to a smaller setting). Let's just say this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Layout test</title>
    <link href="simple.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
    <h1>Welcome</h1>
    <div id="right-div">
      <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
      </ul>
    </div>
    <div id="main">
      <p>Some content goes here!</p>
    </div>
  </body>    
</html>

let's say he also has this simple CSS:

#main {
  border:       1px solid black;
  width:        800px;
  height:       500px;
  padding:      7px;
  margin-left:  auto;
  margin-right: auto;
  position:     relative;
  z-index:      10;
}

#right-div {
  border:   1px solid black;
  float:    right;
  width:    200px;
  position: relative;
  z-index:  9;
}

At the moment, if I reduce the size of the window, the div with id on the right-div starts to overlap with the "main" div . I need to know how to make it disappear or hide if the screen size is small (or getting smaller).

How can i do this? Thank you in advance for your help,

J.

+5
source share
2 answers

, . http://jsfiddle.net/uMVMG/

<div id="container">
    <div class="inner">

        <div id="right-div">
            <ul>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
            </ul>
        </div>

        <div id="main">
            <p>Some content goes here!</p>
        </div>

    </div><!-- .inner end -->      
</div><!-- #container end -->

#container {
  overflow: hidden;
  max-width: 500px;
  min-width: 300px;
}

#container .inner {
  width: 500px;
}

#right-div {
  float: right;
  width: 200px;
  background: green;
}

#main {
  width: 300px;
  height: 200px;
  background: red;
}
+2

. :

@media all and (max-width: 300px) {
    .floated_div { display: none; }
}

jsFiddle. , 300 , .

. IE.

+22

More articles:


All Articles