div alignment

[jcostanzo]

Ok I have been working with XHTML and CSS to create a portfolio page.

I created an outer div and then nested in that 3 divs for header nav and content. Here is the page

http://jrock2004.net/pages/resume.htm

Now as you can see when the content section gets longer than the nav section the content move to over left. I would like those two things seperate. Here is my CSS coding for the nav

.navigation{
float: left;
clear: both;
padding-right: 25px;
height: 100%;
}

I have removed the height 100% and that does nothing. Should I add a float attribute to the content section?

 

[jstreich]

Cheap and dirty options
1. In the nav, add another div with class="clear" and in the the CSS rules for .clear set [green]clear: right;[/green]
2. Don't float the content, but rather give it a margin of the width of the navigation bar.
3. Use a table for layout **NOT RECOMMENDED**

I think I'd opt for option 2.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[jcostanzo]

But the width of the navigation is not set. Or are you saying to set the width of the navigation and then set the margin?

 

[jcostanzo]

Ok I think I might have gotten what you meant

.navigation{
float: left;
clear: both;
padding-right: 25px;
width: 150px;
}

.content{
margin-left: 150px;
}

but still did not work

 

[jstreich]

Position appears to be working now...

However, I noticed in your code:

<img src="../images/shim.gif" width="10" height="45" alt="transparent white space" />

This shouldn't be needed, you should use margin and padding to control spacing instead of forcing users to download blank images.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[jcostanzo]

Thank you for the tip. I did solve my issue with the margin-left in css.

This is skelton code I will fix soon.