BlueHorse
Reputation: 105
my columns not in opposite with using float:right
So i am using aside html5 semantic to make columns.
I wanna have them on the left and right
So i just use class to use float:right to have them in opposite of each other.
but for some odd reason i cannot understnd, its not working in the last one.???
p.s I am new to html or coding in general. don't mind the aesthetics of the codes.
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<a href="https://twitter.com" id="socialmedia1"></a>
<a href="https://facebook.com" id="socialmedia2"></a>
<a href="https://youtube.com" id="socialmedia3"></a>
<div class="logo"></div>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>Upvotes: 0
Views: 86
Answers (4)
Jinu Kurian
Reputation: 9426
Remove margin-bottom:15px from aside tag
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
/*margin-top: 15px; */
margin-bottom: 15px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<a href="https://twitter.com" id="socialmedia1"></a>
<a href="https://facebook.com" id="socialmedia2"></a>
<a href="https://youtube.com" id="socialmedia3"></a>
<div class="logo"></div>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="home.html">Home</a></li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>Upvotes: 0
Budianto IP
Reputation: 1297
Replace your :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
with this one :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
clear:right;
}
PS:
- I added the clear: right; line
- After each float:right, you have to reset the floating element, by using clear: right, so the next element which positioned below will be drawn from the left, just the same as the above elements
Upvotes: 1
Ganesh Kumawat
Reputation: 61
you can shift left and right aside block with this css, Please use this css-
aside.right { clear: both; } aside { float: left; }
Upvotes: 0
G.L.P
Reputation: 7217
Try like this: Demo
Use this
aside.left{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure should be like this:
<aside class="left">...</aside>
instead of
aside{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure:
<aside>...</aside>
Upvotes: 0
Related Questions
- The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?
- Change an HTML input's placeholder color with CSS
- How can I transition height: 0; to height: auto; using CSS?
- How can I make a div not larger than its contents?
- How can I change an element's class with JavaScript?
- How do I reduce the opacity of an element's background using CSS?
- How can I select an element with multiple classes in jQuery?
- Excess space on the right
- Vertical alignment of elements overlapping in IE