how to make a floating div disappear for smaller screens?
This is a 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 if resize the browser window to a smaller setting). Let's say it's something as simple as 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 it has this simple CSS too:
#main {
border: 1px solid black;
width: 800px;
height: 500px;
padding: 7px;
margin-left: auto;
margi开发者_如何学编程n-right: auto;
position: relative;
z-index: 10;
}
#right-div {
border: 1px solid black;
float: right;
width: 200px;
position: relative;
z-index: 9;
}
As of now, if I reduce window size, the div with id of 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 accomplish this? Thank you all in advance for your help,
J.
Use Media Queries. Example:
@media all and (max-width: 300px) {
.floated_div { display: none; }
}
jsFiddle Example. Resize the output area until it is smaller then 300px to see the effect.
See this answer for IE compatibility.
Here is a solution if you have a fixed width layout. 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;
}
加载中,请稍侯......
精彩评论