Menu
I use CSS to style aside. After applying this style, aside moves to left but I want it at the right of the page. I want aside to have a height that is relational to the container. i.e. I want its bottom margin to touch the top of the footer no matter what is the height of the container.
Style:
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
position:absolute;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}
699
Remove position: absolute;. If you want to keep position: absolute; you can add right: 0; instead.
html,body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
height: 100%;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
}<aside>I'm at the right side</aside>As Gustaf said, you have to remove the 'position: absolute' to switch the side. To define the height, all the parents of element, needs to have a defined height, so the children element will have a reference to render your own height, like this:
html, body{
height: 100%;
}
aside {
width:260px;
float:right;
border-left:1px dashed #aaa;
padding-right:15px;
padding-left:15px;
text-align:center;
overflow:auto;
background-color:blue;
border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.5);
height: 100%;
}<html>
<head></head>
<body>
<aside>I'm at the right side</aside>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
