Home/ Questions/Q 6562779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:45:00+00:00

This is probably a very easy question, but I never really did web… so

  • 0

This is probably a very easy question, but I never really did web… so I have my troubles with CSS.

I’m trying to style my CV using CSS and HTML5. I have created a little class for my main aside, which I intend to use as the place to put things that are somehow related to the main content, such as new official artworks from our game artists in a page about the new game’s gameplay, or links to game characters, etc.

I also wanted to eventually reuse the aside element in other containers, such as the navigation bar, to have a special element on each page that’s clearly set apart of other navigation links.

However, while the latter part works, the first fails. I think applying the rightpane class to my aside element resets the position to the left, when I thought it would apply the float: right rule and then position absolutely 20% from the top.

  • Is my understanding correct?
  • If I add a right: 5% rule to the aside element styling, then my box displays somehow where I want, but it’s a pre-decided position compared to letting it float on the right, which seems bad?

So what should I do?

aside {
text-align: right;
float: right;
}

.rightpane {
text-align: right;
overflow: scroll;
visibility: visible;
position: absolute;
max-width: 20%;
top: 20%;
}

I use that in a code that looks this way:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="../Presentation/CSS/main.css" />
<title>
Minus and Brains, Inc.
</title>
</head>
<body>
<nav id="navBar" class="center">
<ul>
<li>
<a href="wtf.html">WTF</a>
</li>
<li>
<a href="Cheese.html">Cheese</a>
</li>
<aside>
<li>
<a href="supertramp.html">Breakfast in America</a>
</aside>
</li>
</ul>
</nav>
<article>
<h2>Plans to conquer the world</h2><time datetime=”2011-09-09T19:31:45+01:00″>9 septembre 2011</time>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</article>
<aside class="rightpane">09/09/2011<br/>Some brilliant news: Brains finally takes over World!</aside>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I created a fiddle: http://jsfiddle.net/jasongennaro/StuPB/ but it is hard to tell what is happening here because we are missing some of your css.

    In any case, position and float cannot coexist in the way you think… so one will override the other.

    If you want the .rightpane to stay right, then you need to add a right:0px (or some other appropriate px/%/etc.) to your css, something like

    aside.rightpane {
    text-align: right;
    overflow: scroll;
    visibility: visible;
    position: absolute;
    max-width: 20%;
    top: 20%;
    right:0%;  //ADDITION HERE
}

    Updated example: http://jsfiddle.net/jasongennaro/StuPB/1/

    • 0