Help - Search - Members - Calendar
Full Version: CSS Spacing
HTMLHelp Forums > Web Authoring > Cascading Style Sheets

I’m struggling to get the vertical spacing right for my college assignment - can someone help me out?

I’d like everything to be centralised, similar to the attached image but everything is skewered to the right
This rule screws things up. I would remove all of it except the border (commented out what I think should go).

input[type="text"] {
  /*display: table; */
    /* margin-right: 200px; */
    /* width: 100%; */
    border: 2px solid #d9d9d6;

This rule too.


margin: 20px auto;
    width: 320px;

The above rule does center the form on the page, but since the table is much wider than 320px it will stick out from the form, to the right. Put borders on FORM and TABLE and you can see what happens. Remove all of the above and use this instead.

form    { width: 100% }

Now the form spans all of the page and you can center the table within it by giving it auto left and right margins.


table   { margin-left: auto; margin-right: auto }

The submit and reset buttons can be centered by putting them in a DIV that you style with text-align: center (if you want them centered).

About the vertical spacing, exactly where and how do you want it?
Thank you, that helped solve my problem (including the vertical spacing issue) smile.gif
It did? I never noticed anything happened with that. biggrin.gif
lol, I meant to say "vertical alignment" tongue.gif
Well, I didn't notice that either. tongue.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.