I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
And here is the fiddle: http://ift.tt/1c33tI9
I've tried a bunch of different code combinations and still no success...
Thank you.
HTML:
<body>
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b><a href="index.html">Calories</a></b></div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--<a href="profile.html">Home</a> | -->
<a href="index.html">Sign In</a> |
<a href="index.html">Sign Up</a>
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">
Yes hello....!
</div>
</section>
<section id="wrapper">
<br><br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li>
<a href="#" class="ActiveListItem">Category</a>
<ul>
</ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot">
</section>
</body>
CSS:
/*adder*/
@import url(http://ift.tt/YlWz97, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:#1e1e1e; /*Back Colors 1*/
}
body {
background-color:#1e1e1e;
/*background:url('http://ift.tt/1xlzFR9');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
} /*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
} /*These nofancies don't work*/
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#1e1e1e; /*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color:#000000;
position:relative;
margin-bottom:30px;
}
#wrapper {
text-align: center;
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#RightExtra{
background-color:none;
width:500px;
float:right;
margin-left:auto;
margin-right:auto;
position:relative;
}
#RightExtraContent{
font-family: Tahoma;
font-size: 16px;
height:800px;
width:300px;
color:white;
background-color:#343434;
text-align:center;
border-radius:30px;
position:fixed;
float:right;
}
#followfoot{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color:none;
text-align:center;
/*display:none;*/
}
#mag{
background-color: #739FE0;
border-color:#739FE0;
border-style:solid;
border-width:2px;
border-radius:20px;
line-height:10px;
text-align:center;
margin-left:8px;
cursor:pointer;
}
#feety {
text-align: center;
width:100%;
height:0px; //100px
background-color:darkslateblue; /*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:fixed; //Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter{
/*background-color:#1e1e1e; Back Colors 5*/
padding-top:30px;
margin-bottom:50px;
height:90px;
}
.SignUp{
background-color:#ccc;
border-width:1px;
border-color:#ccc;
border-radius:10px;
width:75px;
padding:0px 0px;
margin-left:30px;
text-align:center;
float:right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style:solid;
border-width:1px;
border-color:#739FE0;
width: 100px; /*Widthchanger1*/
border-radius: 4px;
margin-left:0px;
margin-right:0px;
font-size:14px;
height:33px;
}
ul.navbar li a.ActiveListItem {
color:white; !important;
background-color:#222 !important;
padding:7.5px 0px !important;
font-weight:normal !important;
margin-left:0px; /*Widthchanger2, got the activeitem centered with list text this way*/
margin-right:0px;
border-radius: 4px;
height:18px;
width:100px; /*kinda messes with width of text*/
margin-bottom:1px;
}
ul.navbar li {
position: relative;
width:100px; /*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background:#739FE0;
color:#FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px; /*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
form { }
.lister input {
width:235px; /*width of todo input box*/
height:33px;
padding-left:10px;
padding-right:10px;
border-width: 1px;
border-style:solid;
border-color:#739FE0;
float:left;
margin-bottom:20px;
font-size:14px;
font-family:"Tahoma";
background-color:#222;
color:white;
}
.lister input:focus {
outline:none;
border-color:#739FE0; /*ccc*/
box-shadow:0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px; /* padding for outside area of list*/ /* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background:none;
/*width: 100%;*/
font-family:"Tahoma";
}
.active {
text-align:center;
}
.inactive { display: none;}
.lister li {
font-size:14px; /*font size of list items*/
/*font-weight: 600;*/
color: #181818; /*Font Color d5faf3*/
display:inline-block; /*This makes the items side-by-side and not columns*/
padding:9px;
margin-bottom:5px; /*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434; /*LighterInside Color,Odd*/
border-color:#ccc;
border-width:1px;
border-radius: 5px;
border-style:solid;
box-shadow: 0px 0px 10px 0px #000000;
color:#ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434; /*LighterInside Color,Even*/
border-color:#ccc;
border-width:1px;
border-radius: 5px;
border-style:solid;
box-shadow: 0px 0px 10px 0px #000000;
color:#ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top:2px;
display:inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color:#000000;
}
.lister li > span {
display:inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width:379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position:right 5px center; /* -15*/
transition: background 0.4s;
}
.clearable.x { /*background-position: right 5px center;*/ }
.clearable.onX { cursor: pointer; }
Aucun commentaire:
Enregistrer un commentaire