"News" Tab Problems

+1 Lucas Skarpness · March 17, 2015
In the video 12th video of HTML5, the "news" section is placed to the right. Mine is placed under the two articles. Any info, advice, tips, or a diagnosis for this problem would be greatly appreciated.

Post a Reply

Replies

Oldest  Newest  Rating
0 Lucas Skarpness · March 21, 2015
Anyone?
0 Stuart Abbott · March 21, 2015
There could be something wrong with the margin or padding of your page. If you post the code here, people can take a look and are often helpful with their replies.
0 Lucas Skarpness · March 22, 2015

{
margin: 0px;
padding: 0px;
}
h1{
font: bold 20px Tahoma;
}
h2{
font: bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
body{
text-align:center;
}
#big_wrapper{
width:1000px;
margin: 20px auto;
text-align: left;
background: #e5e5e5
}
#top_header{
background: gray;
border: 2px solid black;
padding: 20px;
border-bottom: #c0c0c0;
}
#top_menu{
background: darkgray;
color: white;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px Tahoma;
}
#main_section{
float: left;
width: 660px;
margin: 30px; /* 720px, 280px left */
}
#side_news{
float: left;
width: 220;
border: 1px 
margin: 20px 0px;
padding: 30px;
background: #c0c0c0
-webkit-align-items: right;
}
#the_footer{
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid green;
background: darkgray;
}
article{
background: #FFFBBC;
border: 1px solid red;
padding: 20px;
margin-bottom: 15px;
-webkit-border-radius: 9px;
-webkit-box-shadow: #290202 10px 10px 16px;
}
article footer{
text-align: right;
}
0 Stuart Abbott · March 22, 2015
Hi. The issue is in your CSS. You are missing a few semi colons and a few measurements. For example,  the big_wrapper needs a semi colon after the background color and your side_news width needs to be px.

The reason that the side bar is falling beneath the main section is due to the marginn on the side news. You have the following properties:

Big Wrapper width = 1000px
Main Section width = 660px + 30px margin each side = 720px (Leaving 280px)

Your side news bar is trying to then fit the following
Width = 220px
Padding = 30px either side = 60px total giving TOTAL width of 280px

You also have a border with width 1px. This adds 2px to your total width, taking it above the 280px available. You just need to drop your width to 218px and it should all fit (and put your semi colons in!)
0 Lucas Skarpness · March 25, 2015
Thanks Stuart! :)
0 Stuart Abbott · March 25, 2015
No worries.  Hopefully it was of use :)
  • 1

HTML / CSS / Web Design

107,279 followers
About

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

Links
Moderators