Question

How can I get two divs aligned in the same “row” on a website?

I have been working on this page, and I have tried to get a menu that floats to the left side of the website and then the content to the side of that.

I have tried using this as the div‘s CSS:

.menu
{
    width:25%;
    height:auto;
    margin-bottom:2px;
    float:right;
    position:fixed;

}
.content
{
    width:70%;
    height:50%;
    margin-bottom:2px;
    padding: 25px;
    float:right;
}

The page is not displaying them side-by-side and floating, but instead how most website such as: http://www.exorithm.com/, where they have a sidebar and an area for content.
Can anyone help?

All my code: http://pastebin.com/KqYkrweE

Answer 1

I think the problem is that you have position:fixed on the menu. If you use position fixed or absolute, it removes the element from the document flow, so float:right becomes irrelevant.

Edit: Here is a better example of achieving the same result

Also bear in mind that you are using percentages for width and then applying a pixel based padding. This could lead to the elements becoming too wide for the page and displaying one below the other.

70% + 25% = 95% with 5% left over.

If the 5% is less than 50px (making the whole width 1000px) then your columns will total greater than the entire width. A better approach would either be to use percentage based padding (not 100% sure how well this works) or to apply your padding, margins and borders to elements inside the floated columns, like so:

// CSS
.leftCol {
    float:left;
    width:25%;
}

.rightCol {
    float:left;
    width:75%;
}

.content {
    padding:25px;
}

// Markup
<div class="leftCol">
    <div class="menu">
        Here is my menu
    </div>
</div>
<div class="rightCol">
    <div class="content">
        Here is my content
    </div>
</div>

Edit 2:
If you want your menu to stay on screen as the user scrolls down, then position:fixed will do the job. I looked at your page and it looks like you have a fixed width navigation of 206px. Therefore your styles for the existing markup would be better off as something like:

// CSS
.menu {
    position:fixed;
    left:0;
    top:0;
    width:206px;
}

.content {
    padding: 25px 25px 25px 231px;
}