CSS positioning problems

[bubazoo]

Hey guys,my wife has some buttons she made for her site using only CSS, and She's trying to figure out how to position them on the page so that they align into 2 columnshere is the CSS she is toying with

.cssbutton{background-color: #BDB5FF;border: 2px #BDB5FF  outset;padding: 1px 2px;color: black;text-decoration: none;font: bold 100% "cursive", Verdana, sans-serif; display: block; margin: 0 370px;}.cssbutton:visited{color: black;}.cssbutton:hover{border-style: inset;background-color: aqua;padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/}.cssbutton:active{color: black;}

Normally what I do for images, is set the style all around a container field, and float them to show up into 2 columns.. for instance, for images I normally use

container {	  margin: 0px auto;	  width: 415px;	  height: 115px;	  }.pic {	  float: left;	  margin: 5px;	  text-align: center;	  }

but as I found out, with links you cannot do that...for the HTML I normall do lke

<div class="container">   <div class="pic">   <img src="row 1 column 1">   <img src="row 1 column 2">  </div>   <div class="pic">   <img src="row 2 column 1">   <img src="row 2 column 2">  </div></div>

but that doesn't seem to be working in this case.. right now for her HTML she has

<p><a href="http://www.dynamicdrive.com" class="cssbutton">Photo Gallery</a></p><p><a href="http://www.dynamicdrive.com" class="cssbutton">Links</a></p><p><a href="http://www.dynamicdrive.com" class="cssbutton">About Me</a></p>

which I told her she would have to put around div tags, but it didn't seem to work when we tried it.does anyone have a clue what we are doing wrong here? er what we are missing?she wants the links to look like buttons, that change color when you hover over them, which is working now, but straight down the page.. What she wants is to position them 2 columns across, anyone know how to do this?I tried float and setting the margin to 0px auto but that didn't work, so I don't know what to try now, any suggestions? normally this works with images, but it isn't with text links, so I must be missing something.thanks

[jlhaslip]

Remove the <p> tags. They are forcing a line break, I think. Try your approach. Should work.

[bubazoo]

Remove the <p> tags. They are forcing a line break, I think. Try your approach. Should work.

it didn't. I took out the <p> tags and tried my approach with the nested <div's, and it still didn't work.Not in IE 7 and Firefox either one.Here is what she has..... http://tcoburn.com/testing/testing3.html Its what she wanted me to make into 2 columns. Its what she wants, just split into 2 or 3 columns, so we thought since there are 10 links it would be best to split them into 2 columns.in IE it looks terrible, in firefox it looks fine, so we don't know what to do about that either) so I tried this:http://tcoburn.com/testing/testing.htmland it isn't working... See what I mean?

[jlhaslip]

Remove the margin from the last line of the .cssbutton block.

.cssbutton{background-color: #BDB5FF;border: 2px #BDB5FF  outset;padding: 1px 2px;color: black;text-decoration: none;font: bold 100% "cursive", Verdana, sans-serif; display: block; margin: 0;}

Now you will have three columns to set padding and margin for.There was a double whammy of margins for the various elements on the page. If you look, you will see what I mean. Removing the margin from this line makes enough room for the three columns. At least at 1024 px width. Might also check it at 800 wide.Upon review, the "container" is 450px wide and the margin for the cssbuttons were set to 370, so you only had 70 px of width displaying.Also, the links are "jumping" due to the on:hover padding. If that is what you want, then fine. Personally, I think it sucks, but whatever...

[bubazoo]

Also, the links are "jumping" due to the on:hover padding. If that is what you want, then fine. Personally, I think it sucks, but whatever...

I don't care one way or the other, I don't think my wife noticed that... I'll ask her about it.It was code she copied from DynamicDrive to make text links look like buttons is all.. If you thinkit looks better without, we can take that out no problem.how does it look now? http://tcoburn.com/testing/testing.htmlI think she wanted some padding inbetween the buttons, but not sure how to do that. I tried using"padding: 10px" inside the .pic routine, but that seemed to have no effect. "shrugs"

[jlhaslip]

try some margin on the pic class.