1) in #side_menu, you wrote a border, not a border.
#side_menu { boarder: 1px solid #aaa; height: 100%; position: absolute; display: inline-block; background-color: #F8F8FF; float: left; }
2) There is a concept with CSS that gives more or less the "weight" of CSS rules. When you write:
#menu_content { display: inline-block; } .hidden { display: none; }
You might think that class="hidden" overwrite id="menu_content" . This should be due to the .hidden being written to your CSS file after #menu_content. But this is not because CSS rules with #id have more weight than .class .
If you want everything to work, you have two options:
This last parameter will gain weight because it is more specific : you say that you apply the CSS rule mapping to 1) the element class="hidden" 2), and this element contains the attribute id="menu_content" . More specificity means more weight.
#id more specific than .class , which is more specific than <element> .
To learn more about CSS weight, see MDN or CSS-Tricks.
3) For your last problem here is a small sentence, perhaps not perfect, but easy to understand.
Start by editing the HTML : put the smart box inside the auction list at the beginning.
<div id="auction_list"> <div id="smart_box"></div> <div class="auction">(blabla)</div> <div class="auction">(blabla)</div> </div>
This is not the right way (semantically, I mean) to solve your problem, but now, let us edit the CSS ... For #auction_list delete the position, display and width.
#auction_list { margin-left: 200px; padding: 20px; overflow: auto; }
For .auction just add the inline block.
.auction { padding: 10px; margin-bottom: 10px; border-bottom: 1px solid #aaa; border-top: 1px solid #aaa; display: inline-block; }
But note that the width of the .auction elements will be very dependent on their content (how the inline block works if you don't specify width ). This means that you might run into 2 line auctions in your browser rendering. I think that improving this structure will depend on what you do with it + design options.
The idea of ββthis proposal: not to touch the positioning of #auction_list , it is better to work with elements inside it.
Hope this helps. :)