I have a page with one sidebar and a main area, styled in CSS. I would like to get another sidebar on the other side, but everything I tried does not work, e.g. margin-left: auto ; margin-right: auto ;

but all this does is to push to exiasting sidebar down, as if assuming that the space to the left and right belongs to it as a margin.

See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

To hold another 200px wide .sidebar, your .page would have to be 1200px wide and your new .sidebar would need to be placed in the correct spot in your markup.

Have a look at a simple 3 column layout here. Notice only the columns are floated in that example, that may or may not work for you.

04-05-2013, 05:22 PM

qim

Thank you for your reply. I'mvery new to this business and am obviously not doing things right!

I changed the CSS code to add a .sidebar2 and changed the widths, like this, in accordance with one of the links you gave me but it does not work. the main section comes all the way to the left; the existing sidebar content gets pushed down below the main; and the new sidebar on the right , I expect exists but is blank
Now, what I have not done and expect must do is to include something in my form.php. is that right? What, exactly, if you don't mind?

One thing that confuses me is the ### in the CSS code in the link that you sent me. My own code, which I wrote with a lot of online help has dots and sometimes nothing. Can I mix them? Can I, for instance change

One thing that confuses me is the ### in the CSS code in the link that you sent me. My own code, which I wrote with a lot of online help has dots and sometimes nothing. Can I mix them? Can I, for instance change

#sidebar would refer to a div element in your markup with the ID of sidebar, like this <div id="sidebar">

.sidebar would refer to a div element in your markup with the CLASS of sidebar, like this <div class="sidebar">

Thank you for your reply. I'mvery new to this business and am obviously not doing things right!

I changed the CSS code to add a .sidebar2 and changed the widths, like this, in accordance with one of the links you gave me but it does not work. the main section comes all the way to the left; the existing sidebar content gets pushed down below the main; and the new sidebar on the right , I expect exists but is blank

In the new CSS you just posted, where did you get autoflow: auto; ?
Replace that with overflow: auto; and re-arrange your markup so the floats come first like they do in the example I linked you to.

Check out the links about validation in my signature line. Validating is a good way to find little mistakes like that.

In this example, see how I've given a temporary height and background color to the different elements. Just so you can see them while developing your layout.

SORRY: I did not realize Excavator had posted. Going to have a look now.

disaster!!

Well I've added sidebar to the form.php by virtually copying what I had for the other one. The good news is that the boxes thart were in the original sidebar are also in the other and on the right. However the main content is not centered, and the boxes of the sidebars are pushed down below the maincontent instead of being on top.

I'm afraid it still does not work. I must be doing somnething wrong, starting with the fact that I din not follow your instrucyions, YET; regarding colour because my page is quite well advances and if I start changing too much I'm lost!

I re-arranged the markup so the floats come first like they do in the example but it stlill does not work. See image below, please:

I'm pasting the original code before I started messin about with it. I'm also including a pic to show what I have which has only one sidebar. What I need is to cennter the maincontent and add a sidebar on the other side. The text for the fields are out of place because I reduced the image by 50% and theur are position:absolute

I had to go out and got lost again: what error in CSS are you referring to? The overflow was ameded in the Test CSS file. The one I sent you now is the original as the other got so messed up I gave up.

I tested the snippet in EditPlus and it gave me a green sidebar on the left, a right sidebar on the right; and a blue area below the green sidebar, rather than in the center.

Here goes the very unprofessional HTML. Everything works very nicely; the problem is that I want another side bar: