<DIV> moving down on Window Resize
Question
I have a problem with my right_section div. When I resize the browser window, it stays on the right side, but when I hit a certain size it drops down below everything else and continues to compress scrunching up the text within.
How can I get right_section to stay in place when I resize a browser window ?
CSS:
#wrapper {
background-color: #fff;
margin: 80px auto auto auto;
max-width: 1300px;
border: 2px solid #5B5B5B;
padding: 20px;
box-shadow: 0px 4px 4px rgba(155, 155, 155, 0.7);
border-radius: 20px;
}
#container {
background-color: #fff;
overflow: auto;
}
#header {
margin: 0;
}
#logoarea {
position: absolute;
top: 3%;
left: 46%;
}
#logoarea img {
border-radius: 50%;
border: 4px solid rgba(155,155,155,0.7);
}
#header {
margin: 0;
}
#header h1 {
margin: 0;
text-align: left;
font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
font-size: 22px;
color: #000000;
padding: 1%;
text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
}
nav {
margin: 0;
width: 290px;
float: left;
}
#right_section {
margin: 0px 0 0 6px;
width: 74%;
float: right;
height: auto;
position: relative;
overflow: relative;
}
#right_section p {
padding: 20px;
}
#footer {
margin: 0;
}
#footer p {
margin: 0;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, Gotham, sans-serif;
font-size: 12px;
padding: 2% 0%;
}
HTML:
<body>
<!--Start Wrapper-->
<div id="wrapper">
<!--Start Container-->
<div id="container">
<!--Start logoarea-->
<div id="logoarea">
...
</div>
<!--End logoarea-->
<!--Start header-->
<div id="header">
...
</div>
<!--End header-->
<!--Start Nav-->
<nav>
...
</nav>
<div id="right_section">
</div>
</div>
<!--End container-->
</div>
<!--End wrapper-->
</body>
Thanks for any and all help in advance.
3 answers
solution1
0 2015-05-27 16:47:12
您可能要使用css属性
white-space: nowrap;
solution2
0 ACCPTED 2015-05-27 16:48:52
change nav{ margin:0; width:290px; float:left; } nav{ margin:0; width:290px; float:left; } nav{ margin:0; width:290px; float:left; } to nav{ margin:0; width:26%; float:left; } nav{ margin:0; width:26%; float:left; }
change #right_section {margin: 0px 0 0 6px;} to #right_section {margin: 0px 0 0 0px;}
solution3
0 2015-05-27 17:13:26
I think the main part of the problem is the math:
- SHELL (aka #wrapper):
max-width: 1300px; - LEFT SIDE (aka nav):
width: 290px; - RIGHT SIDE:
margin: 0px 0 0 6px;+width: 74%;
At a certain point, 290px is greater than (1300px minus (74% plus 6px));
So two things.
1. Make the left side a percentage: width:24%;
2. But that won't work without compensating for the margin , so change the right side to margin: 0px 0 0 6px; + width: calc(74% - 6px);
I don't know the browsers you need to support, but you should reference canIUse for calc()
All that being said, this is a great example to use display:flex; with!
CODEPEN
HTML:
<div id="wrapper">
<div id="container">
<div id="logoarea">LOGO AREA</div>
<div id="header">HEADER</div>
<nav>MAIN NAVIGATION</nav>
<div id="right_section">RIGHT SECTION</div>
</div>
</div>
CSS:
#wrapper {
background-color: #fff;
margin: 80px auto auto auto;
max-width: 1300px;
width:100%; // <== to always fill parent
border: 2px solid #5B5B5B;
padding: 20px;
box-shadow: 0px 4px 4px rgba(155, 155, 155, 0.7);
border-radius: 20px;
box-sizing:border-box; // <== puts the padding inside the box
}
#container {
background-color: #fff;
display:flex; // <== flex ftw
flex-wrap:wrap; // <== wrap that flex
}
#logoarea {
position: absolute;
top: 3%;
left: 46%;
}
#header {
margin: 0;
width:100%; // <== full width. I assume this was the goal
background: rgba(255,0,0,0.1); // <== just to see the box
text-align center; // again, an assumption
}
nav {
width: 26%;
background: rgba(0,255,0,0.1); // <== just to see the box
}
#right_section {
margin: 0px 0 0 6px;
width: calc(74% - 6px); // <== use calc to compensate for the margin
background: rgba(0,0,255,0.1); // <== just to see the box
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.