Hi guys,

I'm kind of new when it comes to working with CSS, but I am supposed to deliver a site project for school and I'm having a bit of an issue when it comes to the layout of the divs.
I have a maindiv which is supposed to contain 3 divs aligned side by side, menu on left, some writing in the middle, and photos on the right div.
However, my right seems to be aligning pretty weird, here's a printscreen ( http://postimage.org/image/b1byg2vpz/ ) I have tried over and over again to fix the issue, but haven't succeeded so far.

Here's the CSS code:
#maindiv{z-index:1; position:absolute; top:-20; left: 20%; ; right: 20%; width:60%; height:100%; background-image: url('images/divback.jpg');  }
#header { margin: 0px auto; text-align:center; clear: both; padding: 0; position:absolute; left:0px; top:15px; margin-left:5%;}
#writing {padding: 15px;  border-left: 2px solid #4f4341; border-right: 2px solid #4f4341; top: 400px; width:28%; float:left; clear:both; }
#photos {padding: 15px;  float: right; top:0px; width: 10%;  float:left; clear: both; }

.bmenu li a{
	 display: block;
    color: transparent;
    text-transform: uppercase;
    text-shadow: 0px 0px 0.2px #251c1d;
	list-style: none;
    letter-spacing: 1px;
	list-style-type: none;
	position: relative;
	width: 18%;
	padding: 5px 18px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	text-decoration: none;
	clear: both;
	float: left;
	 -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    transform: skew(-12deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
.bmenu:hover li a{
    text-shadow: 0px 0px 6px #251c1d;
	 list-style-type: none;
	 list-style: none;
	 -webkit-transform: skew(0deg);
    -moz-transform: skew(0deg);
    -o-transform: skew(0deg);
    -ms-transform: skew(0deg);
    transform: skew(0deg);
.bmenu li a:hover{
    color: #fff;
	background: transparent;
    text-shadow: 0px 0px 1px #251c1d;
    padding-left: 10px;
	 list-style-type: none;
	 list-style: none;
And the HTML:

<div id="maindiv">			
	<div class="bmenu">
	  the menu
           <div id="writing" style="height:140%"> some writing </div>
           <div id="photos" style="height:140%"> photos </div>
I don't know what I'm doing wrong in the CSS part, could someone please lend me a hand?