How to optimize my CSS/HTML webpage?

I am working on a (HTML/CSS) website to improve my skills but I am not sure if I am doing it the right way, because I have a lot of floats and sizes. I also need help with some CSS things:

What I have:

What I am Shooting for

The red dimensions in the image are the dimensions I've tried to give the objects and which I am not sure if it is the correct way of doing it.
The black words are the things I would like to change in the future, but I need this code reviewed first.

All my code:
INDEX.HTML

   
      
         
            
         
         
            
         
         
            
         
         
            
         
         
            
         
      
   
   
      sidebar
   
   
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
   

-->

STYLE.CSS

```
@import url(reset.css);

body {
background:#f1f1f1;
}

#fullHeader {
float:left;
min-width:100%;
height:90px;
}

#header {
min-width:100%;
height:60px;
background:#B52B42;
}

#inner-header {
width:1180px;
height:60px;
margin:0 auto;
}

#home {
float: left;
width: 140px;
}

#menubar{
float: left;
width: 1180px;
}

#wrapper {
width:1180px;
margin:0 auto;
-moz-box-shadow:0 0 5px #888;
-webkit-box-shadow:0 0 5px #888;
box-shadow:0 0 5px #888;
}

#mainContent {
width:100%;
float:left;
background-color:#FFF;
}

#newsHolder {
float:left;
width:840px;
height:493px;
}

#item1 {
float:left;
width:477px;
height:320px;
margin-bottom:5px;
}

#item2 {
float:right;
width:358px;
height:244px;
margin-bottom:5px;
}

#item3 {
float:left;
width:236px;
height:167px;
margin-right:5px;
}

#item4 {
float:left;
width:236px;
height:167px;
}

#item5 {
float:right;
width:358px;
height:244px;
}

#item1 img,#item2 img,#item3 img,#item4 img,#item5 img {
width:100%;
height:100%;
}

#sidebar-right {
float:right;

instead of using ID's you should be using classes. like this

   
      
         
            
         
         
            
         
         
            
         
         
            
         
         
            
         
      
   
   
      sidebar
   
   
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
   

-->

then you could change it a little bit more because you have the same exact CSS for 3 & 4 so I would change those to something like this.

#smallLeft {
    float:left;
    width:236px;
    height:167px;
}

    #rtMargin {
    margin-right:5px;
}

same concept for items 2 & 5, and remember that CSS executes top to bottom and will overwrite itself if you change an element with two different selectors in different CSS documents or even on the same document it will overwrite the style, the last one will prevail (in that instance)

Something from my Comment

you should provide all the html, I don't know what is going on with your Headers, but the CSS for them looks wrong. you should apply the width to the outermost element and then 100% the elements inside that you want to be the same width. – Malachi 1 hour ago

StackExchange Code Review Q#37504, answer score: 7