Reputation: 13
I have a problem with the positioning of tag in CSS. No matter what I try it remains below the main part and won't go on top (I need top right corner). Can't figure out where is the problem. Help, please.
Here is the problem part and my CSS code
.aside {
position: relative;
float: right;
margin: 14px 14px 14px 0px;
padding-left: 15px;
clear: left;
width: 220px;
background-color: #EAA845;
}
.sectionaside {
padding: 10px;
margin: 15px 15px 15px 5px;
background-color: #DF5252;
}
<aside class="aside">
<section class="sectionaside">
<h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>
</section>
<section class="sectionaside">
<h4>Related web sites</h4>
</section>
<section class="sectionaside">
<h4>A "must have" skills in 21st century</h4>
</section>
</aside>
<footer><u>Contact information</u></footer>
Upvotes: 1
Views: 1038
Reputation: 67814
If you want aside
to be above everything else, just add clear: both;
to whatever element comes after it - in your particular case the footer, but in real life probably something else.
And if you really want it in the upper right corder, erase the margin
setting for it and add margin: 0;
to html
and body
:
html,
body {
margin: 0;
}
.aside {
position: relative;
float: right;
padding-left: 15px;
clear: left;
width: 220px;
background-color: #EAA845;
}
.sectionaside {
padding: 10px;
margin: 15px 15px 15px 5px;
background-color: #DF5252;
}
footer {
clear: both;
}
<aside class="aside">
<section class="sectionaside">
<h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>
</section>
<section class="sectionaside">
<h4>Related web sites</h4>
</section>
<section class="sectionaside">
<h4>A "must have" skills in 21st century</h4>
</section>
</aside>
<footer><u>Contact information</u></footer>
Upvotes: 0
Reputation: 1489
On your css, you are floating right under .aside, That needs to be changed to float: left; And its good practice to make clearfix after you finish floating elements. Check out the attached snippet with the changes on your code. Hope it helps.
.aside {
position: relative;
float: left;
margin: 14px 14px 14px 0px;
padding-left: 15px;
clear: left;
width: 220px;
background-color: #EAA845;
}
.sectionaside {
padding: 10px;
margin: 15px 15px 15px 5px;
background-color: #DF5252;
}
.clearfix{
clear:both;
}
<aside class="aside">
<section class="sectionaside">
<h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>
</section>
<section class="sectionaside">
<h4>Related web sites</h4>
</section>
<section class="sectionaside">
<h4>A "must have" skills in 21st century</h4>
</section>
</aside>
<div class="clearfix"></div>
<footer><u>Contact information</u></footer>
Upvotes: 1
Reputation: 581
Try using position: absolute
(if it should be placed relative to <body>
) or position: fixed
(sticks to window) on tag with the top
or left
properties
Upvotes: 1