Aligning divs

[Vox]

I'm having some trouble aligning my divs to the right. I have it set up so that there are two divs, one on the left, which is navigation, and it has a width of 10%. It's where I want it. But I have another div that's to the right of that (the navigation div floats to the left) and I want it to align with the right of the page and with a width of 85%. Here is my css:

Code: Select all

#nav {
   float: left;
   border: solid;
   border-color: #198bc8;
   border-top-width: 3px;
   border-right-width: 3px;
   border-bottom-width: 3px;
   border-left-width: 3px;
   background-color: #b4d8ff;
   width: 10%;
}

#nav ul {
   display: inline;
}

.content {
   margin-top: 1em;
   border: solid;
   border-color: #198bc8;
   border-top-width: 3px;
   border-right-width: 3px;
   border-bottom-width: 3px;
   border-left-width: 3px;
   background-color: #b4d8ff;
   width: 85%;
}

I can't find any align attributes that do what I want. I tried text-align, but it only moved the text, not the div or borders.

Any help would be appreciated.

[Johnathan]

Put float:right; in your content class.

[Vox]

Put float:right; in your content class.

But if I do that, won't any text that I put beneath it fill in the empty space left between my nav and content?

[Johnathan]

Make a clear class in your CSS like:
.clear {clear:both;}
And under the floated DIV's in your HMTL have:
<div class="clear"></div>
Then put the rest of your text under that DIV.

[Vox]

Make a clear class in your CSS like:
.clear {clear:both;}
And under the floated DIV's in your HMTL have:
<div class="clear"></div>
Then put the rest of your text under that DIV.

Okay, thank you for your help.