Simple 2 column layout goes wrong :-)


Just when i thought I was getting the basics of css understood i got really frustrated at how this page turned out:
http://www.davidclick.com/york_wedding_photographer_advice.htm

Basically the left navigation column despite looking correct in firefox on my mac last night looks completely wrong at my works laptop even though I’m still using firefox.

The problem is the left nav now squirting off at the bottom of the page but i just dont get how it could as i floated the main content to the right at 90%
and the left hand nav was floated to to the left at 10%.

I did notice when i fiddled with screen resolution it did sit where it was supposed to but is there a method to make it sit where i want it all the time regardless of screen resolution.

Here is the css snippet baccking this up:
#nav {
float-left:10%;
display: inline;
list-style-type: none;
}

.column2 {
background-color:#BBBBBB;
display:inline;
float:right;
height:44em;
margin-left:0;
width:90%;
}

Any insights welcome :slight_smile:

Good morning,

It seems to be a combination of rounding errors along with a small CSS error.

In your #nav, ‘float-left:10%’ is incorrect.

Try using ‘float:left; width:10%;’

To fix the rounding error, if it still doesn’t look right after you apply the #nav fix, try setting the width for ‘.column2’ to 89%.

I hope this helps! :slight_smile:

Brilliant thank you, your solution worked :slight_smile: