I’ve already tried to change the locations of the elements, but because there are so many in my css file I don’t know where to begin or where to look.
For the sidebar I used this code:
#sidebar {float:right; width:300px; min-height:60px; }
But for the rest of the content of my blogpage I don’t know what I have to change.
Here are some example codes:
.home_post_box { float: left; margin: 25px 0px 0 0; width: 244px; height: 258px; position: relative; }
.home_post_box img { width: 244px; height: 258px; }
.home_post_box .home_post_title {font-family: 'Raleway', sans-serif; font-weight: 300; position: absolute; bottom: 10px; left: 10px; width: 130px; font-size: 12px; color: #fff; text-transform: uppercase; background-color: #fff; padding: 3px; border-radius: 2px; }
.home_post_box_last { margin-right: 0; }
.home_post_title a { color: #222; text-decoration: none; }
.home_post_title a:hover { text-decoration: underline; }
.blog_box { float: left; margin-top: 25px; }
.blog_box .left img { width: 614px; height: 337px; border-radius: 5px; }
.blog_box .right { font-size: 14px; width: 290px; background-color: #fff; padding: 15px 15px; height: 307px; }
.blog_box .right h3 { font-size: 20px; margin-top: 0; font-weight: normal; }
p.blog_date { margin-bottom: 20px; }
.blog_box .read_more { display: inline-block; font-size: 13px; color: #fac600; padding: 1px 1px; }