I'm practicing with html & css, just started, and i'm already stuck. I got a sticky aside that seems to take all the possible width and prevent the positioning of other elements right to it. I've tried two ways:
Also, i've got another small problem with the aside: i would like it to scale down when the user haven't yet scrolled the page (otherwise some lines aren't visible until "the aside position changes to sticky"). Tried flexbox attributes but no luck.
Page isn't yet responsive. Here the code:
body {
background-image: url(html-images/random1/backgroundmain.jpg);
background-repeat: no-repeat;
background-size: cover;
margin:0;
}
#headermain {
background-color:rgba(128,128,128,0.4);
height:150px;
padding-top:5px;
padding-left:5px;
}
#logoheadermain {
float:left;
padding-right:5px;
}
#titleheadermain {
color:black;
text-align:center;
font-family:monospace;
padding-top:20px;
padding-right:10px;
}
@media only screen and (max-width:800px) {
#titleheadermain {
padding-top:0.1px
}
}
#titleheadermain h1 {
font-size:30px;
}
#titleheadermain h2 {
font-size:22px;
}
@media only screen and (max-width:650px) {
#titleheadermain h1 {
font-size:26px;
}
#titleheadermain h2 {
font-size:20px;
}
}
#navbarmain {
position:sticky;
top:0;
color:white;
width:100%;
font-family:monospace;
font-size:20px;
z-index:1;
}
#navbarmain ul {
list-style:none;
flex-direction:row;
width:100%;
margin:0;
padding:0;
display:flex;
}
#navbarmain li {
background-color:black;
width:16.66%;
display:inline-block;
text-align:center;
padding-top:12px;
height:46px;
box-sizing:border-box;
margin:0px;
box-shadow:4px 4px 3px gray;
}
#navbarmain li:hover {
background-color:rgb(77, 77, 77);
cursor:pointer;
}
#asidemain {
width:16.6%;
text-align:center;
font-family:monospace;
font-size:18px;
position:sticky;
top:46px;
overflow-y:scroll;
height:565px;
background-color:white;
display:inline-block;
}
#asidemain ul {
list-style:none;
padding-left:0px;
display:flex;
flex-direction:column;
margin:0;
}
#asidemain li {
padding-top:20px;
padding-bottom:20px;
}
#asidemain li:nth-child(odd) {
background-color:rgb(204, 204, 204);
}
#asidemain li:hover:nth-child(even) {
background-color:rgb(204, 204, 204);
cursor:pointer;
}
#asidemain li:hover:nth-child(odd) {
background-color:white;
cursor:pointer;
}
#mainmain {
height:100%;
width:75%;
padding-left:20%;
padding-top:20px;
padding-right:40px;
}
#section1 {
font-family:Tahoma;
text-align:center;
margin:0;
display:inline-block;
}
#article1a {
text-align:center;
width:50%;
display:inline-block;
float:left;
}
#article1a p {
font-size:18px;
text-shadow:1px 1px darkgray;
}
#article1b img {
display:inline-block;
width:250px;
height:450px;
margin-top:120px;
float:right;
box-shadow:5px 5px 5px gray;
}<body>
<header id="headermain">
<div id="logoheadermain">
<svg style="height:145px; width:250px;">
<polygon points="10,10 10,135 235,135 235,10" style="stroke:black;
stroke-width:6px; fill:transparent;" />
<text fill="black" font-size="95px" font-family="monospace" x="17"
y="103"> LrIs </text>
</svg>
</div>
<div id="titleheadermain">
<h1> Lorem Ipsum </h1>
<h2> Dolor sit amet, consectetur adipisci elit </h2>
</div>
</header>
<nav id="navbarmain">
<ul>
<li> Sed do </li>
<li> Eiusmod </li>
<li> Tempor </li>
<li> Incidunt </li>
<li> Ut labore </li>
<li> Et dolore </li>
</ul>
</nav>
<aside id="asidemain">
<ul>
<li> 0000000 </li>
<li> 1111111 </li>
<li> 2222222 </li>
<li> 3333333 </li>
<li> 4444444 </li>
<li> 5555555 </li>
<li> 6666666 </li>
<li> 7777777 </li>
<li> 8888888 </li>
<li> 9999999 </li>
</ul>
</aside>
<main id="mainmain">
<section id="section1">
<h3> Sed do </h3>
<article id="article1a">
<p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit,
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam
est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt, ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae
consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla
pariatur? At vero eos et accusamus et iusto odio dignissimos
ducimus, qui blanditiis praesentium voluptatum deleniti atque
corrupti, quos dolores et quas molestias excepturi sint, obcaecati
cupiditate non provident, similique sunt in culpa, qui officia
deserunt mollitia animi, id est laborum et dolorum fuga. Et harum
quidem rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus
id, quod maxime placeat, facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut
officiis debitis aut rerum necessitatibus saepe eveniet, ut et
voluptates repudiandae sint et molestiae non recusandae. Itaque
earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus
asperiores repellat.</p>
</article>
<article id="article1b">
<img src="html-images/random1/article1b.jpg" alt="A random image" />
</article>
</section>
</main>
</body>
</html>You have to set both Aside and Main tags as Height as the Maximum range you need. For example, suppose I am going to set the height of Aside as 100vh (Here Vh means Viewport height) It will take a full view screen of your browser height. Same as follow for the main also. Position Sticky will be working for you as per the need.
Try to change your CSS as below follows
#asidemain {
width: 25%;
height: 100vh;
min-height: 500px;
overflow: auto;
position: -webkit-sticky;
position: sticky;
top: 5%;
}
#mainmain {
width: 60%;
height: 200vh;
min-height: 1000px;
}