HTML5 and Me (HW help!)

[Carpe Vexillum]

So I've got this final project for my Interactive design class. We have to make a website. One that has a fluid design. I have hit a brick wall and need some assistance from some good fellow who might know a good amount of HTML5.

Now my end goal is to have the user click on one of the titles/graphic on the nav bar and to have a box with information appear in the content area of the website. When they close it, or click another link it will disappear or the information that they clicked will appear. And I want to do all of this without Java Script.

This is the skeleton for my site. It has a main navigation on the left that is fixed to the top.
5001

This is what I have using a :target operator for my div's content to appear in a CSS stylized box.
5002

The main problem I am having is that when I switch to an almost identical style (For my first Box I had to add a -margin hack to keep the hyper link from jumping down to the top of the appearing box) for my second, third, fourth, and fifth navigation headings, it snaps the page down to below the content area because I am assuming it wants to put the box there. And so on down the page. Plus, nothing actually appears. . . Does/can anyone help me get this working or at least point me in the right direction? I have provided my wip code if necessary.
5003

CSS ------------------- HTML
5004 ///////// 5005

[Carpe Vexillum]

Set the position to absolute and fixed it. . . This always happens, I ask for help and then figure it out a few minutes later. Now I just need to get the scaling down correctly. Media Q awaaaaayyy!

[Mythonian]

Set the position to absolute and fixed it. . . This always happens, I ask for help and then figure it out a few minutes later. Now I just need to get the scaling down correctly. Media Q awaaaaayyy!

lol... I wish I had read your reply before looking over your CSS and trying to figure it out (half impossible to go through it without formatting...). After a minute of going over it, I was about to suggest you do exactly that.

[NervyDestroyer]

Are you using Dreamweaver?

[Carpe Vexillum]

Sublime text.

[Silko]

I saw those imgs and this is how I felt

http://i.kinja-img.com/gawker-media/image/upload/s--qOw8koA5--/japbcvpavbzau9dbuaxf.jpg

[bl4yze]

You could also fix this by having a container div with 100% width, and nesting two divs within, one for your menu and one for content. You'd have to add some media queries for mobile/tablet use with this method though, as your menu would fill a bit of space on top of your content on smaller devices.

- - - Updated - - -

webflow has a really easy to use site which can help with getting responsive layouts set if you're unfamiliar with coding something like that. From there you can have a look at the html and css and see why it works like it does.

edit: nvm I see you've done this after looking at your code. ignore what i've said

[bl4yze]

lol... I wish I had read your reply before looking over your CSS and trying to figure it out (half impossible to go through it without formatting...). After a minute of going over it, I was about to suggest you do exactly that.

Opening in wordpad > notepad retains formatting.

[Carpe Vexillum]

You could also fix this by having a container div with 100% width, and nesting two divs within, one for your menu and one for content. You'd have to add some media queries for mobile/tablet use with this method though, as your menu would fill a bit of space on top of your content on smaller devices.

- - - Updated - - -

webflow has a really easy to use site which can help with getting responsive layouts set if you're unfamiliar with coding something like that. From there you can have a look at the html and css and see why it works like it does.

edit: nvm I see you've done this after looking at your code. ignore what i've said

Yeah, you should have seen it before I tried to get my teachers help. Before I even got a word out of my mouth he was like, "Whoa okay first before you add anything else, organize your div's and containers." Which gave me the thought to create two separate columns.

On another note I have ran into another wall that I haven't figured out over the past few days.

With my media queries I'm running into trouble getting my :target box to behave. Even though it's in the Content container it doesn't seem to want to obey size proportions of that container. I actually have a demo here of the issue, I turned on the background to the container so it can actually be seen. None of my div's in the content area want to stay inside of it. Which is understandable because they are all going to the same place. But I cant figure out why. Any suggestions?


https://www.youtube.com/watch?v=UAq14Qhr9Oo&feature=youtu.be