First: I’m sorry, but I don’t know to which sub forum this topic belongs. Maybe a kind moderator will move this in the future.

And now to my question:
I’m currently building a new website which can be rather hard if you don’t know anything about coding (!).
This is how I want my website to look like:


Now, my question is if it’s possible to make my content box float while the left box (with the buttons) stays on top (where it is now)?
I bet there is a solution, but as I said I’m no coding expert.

At my other website I used this code to make it float:


But this code doesn’t help me much now. The left box centres beside the floating content box and makes the layout useless.

Can anyone help me with a code to solve my problem? I would be extremely grateful!

A better word for "float" in this case would probably be "loop".

Just to avoid any misunderstandings...

Do you mean that the content box would have a higher height than the menu but the menu would still stay at the top?

This is best to be done with CSS. You would create a div for the header part, another div for the left box, and a last div for the content box. In your CSS, make the left box div float left and give the content box div a relative positioning.
This isn't very detailed, but I lost my code that I wrote, and its layout is similar to yours. So if you need more help, ask me, and I'll look up more things for you.

Yup, that's what I mean. And the content box should expand to the the text in it.



Thanks, I'll try to find some CSS scripts on some coding page then.

Yay, I got my codes back from my old computer. I will show you part of my CSS file, and I added some comments to explain what some declarations mean. I deleted some of the irrelevant parts, like background colors.



Well, that's pretty much it... If you got any questions, ask.

Thank you so much for your help.

Now, there is actually a little question. It doesn’t really have anything to do with the CSS script (a friend told me I probably would need PHP).

My question is: when you click a button, is it possible to make the page it links to open in the content? I mean without reloading the entire page every time you click a button?

I have done it with IFrames in HTML before, but I don't want to spoil a CSS layout with some ugly looking frames.

Can anybody help me here?

It is possible, but would also mean that you would have to load all the "pages" which you want to be opened without a reload, thus making your index file larger.

Anyways, if the content isn't anything heavy that would actually be quite nice to browse.

This is how you do it:

You make each of the "pages" a separate <div>. You should probably make a CSS class called content (or whatever) and use it for all the divs. The class would contain at least the positioning code, so that each of your "pages" (ie. divs) would appear at the same place.

Each of these divs should be given an unique id. Such as "links" or "guestbook".

A div could look like this:



Then with CSS, you set one div:




And all others



Then you need to use javascript to change the "page". The function could look like this:



Notice that before the function, you should have set a value for "current". This line before the function:



"Index" being there the id of the div which you which to have opened as a default.


About that function, it simply gets the element by the id given as a parameter to it, sets the currently active page not to be displayed and the new element to be displayed as block. Finally the now activated element is set as "current" for the next time the function is called.


For the buttons simply user onClick like this:



The html element of course can be whatever you want (and image for example). But don't use links (<a></a> tags) since you always have to specify href value for them. You could put # there but it would cause annoying scrolls to the top. I'd recommend usings <span>s or images and using a CSS class for them specifying:

which makes the cursor appear as the hand over the element, thus indicating a link-like behavior.

And that's it!


One problem arises with this kind of design though. It is the same as with using iFrames: people cannot link to exact pages. However you could do somekind of workaround for it, with PHP for example. Offer links to users with the page intended to be displayed specified as GET data. Like this: yousite.com/index.php?page=guestbook . And then with PHP set which div is set as display: block; on the page load.

Hmm... I’ve played a little with these codes, but I just can’t figure out where to put them. It’s especially the JavaScript part I have troubles with. And do you mean, that I should put all these codes – and the all the pages – in the same file?
Maybe you could put your codes together so I can see where to put them in my own file.
Maybe I should also tell you, that the layout I attached to this thread is no longer the one I’m working with. If it could help you, you can find my site at www.twilight.astahost.com and see the source code.

And thanks for helping me here!

Well, you can put your javascript in your html, inside the script tag like this:


Make sure that is placed in the head.
And for the CSS, you can put them like this:

, also in the head area.

And yes, he meant to put all the pages in one file, and use javascript to show and hide them. For example, when people go to your home, they would go to index.htm, and javascript will show only the "home" portion, while hiding all the other portions of the page. When they go to, say, an "about" page, they would not go to a new page, but instead, javascript will hide the "home" portion, and show the "about" portion only. If your pages are really large, it would take a long time to load everything on just the index page. But if all of your pages are really small and you have only a few pages, that idea could be used.