Using flexbox and i want to make the box an insert
* {
margin: 10px auto;
}
body {
background-color: #C0C0C0;
font-size: 100%;
margin: 10px 10px
}
#main {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
text-align:center ;
width: 50 %;
}
#top_header {
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
-ms-flex-order: 1; /* TWEENER - IE 10 */
-webkit-order: 1; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
border: 2px solid red;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:gray;
padding: 20px;
margin:0px;
width:100%;
font: bold 1.5em Gothic;
}
#top_menu {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+*/
content-align:center;
width: 100%;
text-align: left;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 10px;
border: black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background: #9595FD;
content: center;
}
#top_menu li {
display:inline-block; /* inline means it displays left to right */
text-align: left;
list-style: none;
padding-left: 25px;
padding-right: 25px;
border: 2px solid black;
font: bold 1em tahoma;
content: center;
background: #C0C0C0;
}
#main_section {
-webkit-box-ordinal-group: 4; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 4; /* OLD - Firefox 19- */
-ms-flex-order: 4; /* TWEENER - IE 10 */
-webkit-order: 4; /* NEW - Chrome */
order: 4; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex: 1;
border: 2px solid black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:gray;
width:20%;
height: 100% ;
}
#recent_news {
-webkit-box-ordinal-group: 5; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 5; /* OLD - Firefox 19- */
-ms-flex-order: 5; /* TWEENER - IE 10 */
-webkit-order: 5; /* NEW - Chrome */
order: 5;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
border: 2px solid black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:white;
width: 10%;
height: 100%;
margin:10px;
}
#other_stuff {
-webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
-ms-flex-order: 3; /* TWEENER - IE 10 */
-webkit-order: 3; /* NEW - Chrome */
order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */
border: 2px solid black;
border-radius: 25px;
box-shadow: rgb (110,110,110) 8px 8px 8px;
background:white;
width: 10% ;
height: 100% ;
margin: 10px;
}
#footer {
-webkit-box-ordinal-group: 6;
-webkit-box-ordinal-group: 6; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 6; /* OLD - Firefox 19- */
-ms-flex-order: 6; /* TWEENER - IE 10 */
-webkit-order: 6; /* NEW - Chrome */
order: 6; /* NEW, Spec - Opera 12.1, Firefox 20+ */
border-top: 2px solid black;
background: white;
padding: 5px;
margin:10px;
text-align:center;
width: 100% ;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="Resources Page.css" />
</head>
<body>
<div id="main">
<header id="top_header">
</header>
<nav id="top_menu">
</nav>
<section id="main_section">
<article class="article">
<footer>
<p></p>
</footer>
</article>
</section>
<aside id="recent_news">
</aside>
<aside id="other_stuff">
</aside>
<footer id="footer">
<p></p>
</footer>
</div>
</body>
</html>
Let's say I wanted to #other_stuff
commit in such a way that if there main_section
was a long list of things and a recent news feed said quick search bar, it would scroll down with you so you didn't have to scroll all the way back to quickly jump to what something (since this will defeat the goal of creating a quick navigation bar).
Can I add something to this so that it stays near the left side of the main section? I don't know if fixed position is what I am looking for.
source to share
I feel like you are asking to make the div or element stop as soon as it reaches the top of the screen while scrolling. When used flex
in your design, I won't say this is not possible, but it will be difficult for you to use postion: fixed;
because other elements want to move and move to fill the gap. Also, you will most likely need to use some kind of JavaScript along with what you have so that it can scroll first and then stick. I put together a jsFiddle that shows how to make the sticky part of a div .
source to share