am having problem with floating my news section to the right

+4 dwayne lewis · November 24, 2015
Just can't get my news section to float to the right  i also got an ad section which i want to float to the left so i commented it cause i though that the problem was from there also there is an image which i wanted to centered top in a slide form with different images. please any one help me with that please.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Globalunited Co-Op</title>
    <link rel="stylesheet" href="globe.css" type="text/css"/>
  </head>

 <body>
  <div class="container">
  <header> 
      <h1 class="top_header">Globalunited co-op</h1>
  
   <nav class="nav_menu">
     <ul>
<li><a href="#">Home</a></li>
<li><a href="#">categories</a></li>
<li><a href="#">Opportunities</a></li>
<li><a href="#">Tutorial Videos</a></li>
<li><a href="#"><span id="coins">Bread & Eggs<span></a></li>

     </ul>
   </nav>
   
  </header>
  
  <!--<div class="image"><img width="600" height="400" alt="Beautiful island" src="https://otrwjam.files.wordpress.com/2015/10/155.jpg?w=565"></div>-->
  
 <section >
  <article class="body-text"> 
   <h3>About Gerry's Tutorial co-op</h3>
     <footer><p>--BY Gerry Phillip--</p></footer>
     <p>This tutorial teaches people how to make a cake.</p>
  </article> 
  </section>
  
  <aside class"news">
  <h4>News and Announcement</h4> 
  </aside>
  
  
   <!--<aside class="ads">
    <h4>Advertise</h4>
</aside>-->
  
  <footer class="footer">Gerry's Co-Op 2015 </footer>
  
  </div>
  </body>

</html>

css here:


*{
margin:0;
    padding:0;
}
h1{
font:bold 20px Arial;
}
h3 h4{
font:bold 10px Arial;
}
header,section,footer,aside,nav,article{
display:block;
}
body{
text-align:center;
}
.container{
border: 1px solid black;
width:1000px;
margin:20px auto;
text-align:left;
}
/**.image{
width:600px;
border: 5px solid green;
margin:5px auto;
}**/
.top_header{
background:#28c2c7;
border:1px solid green;
padding:20px;
}
.nav_menu{
background:yellow;
color:black;
border-radius:5px;
margin:1px;
}
.nav_menu li{
display:inline-block;
border-radius:1px;
list-style:none;
padding:5px;
font:bold 14px Tahamo;
}
/*.nav_menu li a:active .nav_menu li a:visited .nav_menu li a:hover*/

section .body_text{
float:left;
width:660px;
margin:30px;

}

.news{
float: right;
width:220px;
margin:20px 0px;
padding:30px;
}




Post a Reply

Replies

Oldest  Newest  Rating
0 dwayne lewis · November 25, 2015
Thanks mate also can you help me in setting the .body_text selector to the center with an .ads to the left of it, i used the same properties and value for the .ads selector except i change the float value.
0 Craig Charlton · November 25, 2015
I haven't looked any further than here but here's your first mistake
<aside class"news">
===================
  • 1

HTML / CSS / Web Design

107,353 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators