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

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
pandy
This rule screws things up. I would remove all of it except the border (commented out what I think should go).

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



This rule too.

CODE

form{
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.

CODE
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.

CODE

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?
Jason89
Thank you, that helped solve my problem (including the vertical spacing issue) smile.gif
pandy
It did? I never noticed anything happened with that. biggrin.gif
Jason89
lol, I meant to say "vertical alignment" tongue.gif
pandy
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.