1 reply [Last post]
dotcomikaze's picture
Last seen: 17 years 19 weeks ago
Joined: 2003-07-24
Posts: 3
Points: 0

OK gang....

If anyone can explain this one I would appreciate it.

I have this page that I am trying to layout and I have a main content area(yellow) and a smaller input form to the right. You can see the page here;


My issue is the buttons in the boxes on the right... I mean the buttons that are supposed to be in the boxes on the right. Each button appears below its corresponding box.

Here is the CSS;

body {
border-bottom: 10px solid #333;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;

#content {
background: #FF0;
float: left;
margin: 20px 5px 0 1%;
width: 73%;

#contentNav {
float: right;
margin: 20px 1% 0 5px;
width: 20%;

.inButton2 {
background-color: #600;
color: #FFF;
display: block;
float: right;
font-size: 1em;
font-weight : bold;
padding: 1px;

.nav {
border: 2px solid #996;
background: #EBEBD8;
margin: 0 0 10px 0;
padding: 3px;

.nav h4 {
font-weight: bold;
color: #600;
margin: 0;
padding: 0 0 3px 0;
font-size: 1em;

I have stripped the css and html down to its minimum and am probably missing something really easy, but I can't see it. I know I could add a specific height, but shouldn't the div just grow to the correct height?

Any help would be appreciated.


Last seen: 17 years 11 weeks ago
Timezone: GMT-5
Joined: 2003-09-22
Posts: 17
Points: 0

Misbehavin Buttons

Just before the end of your DIV, try adding "<div style="clear: both;">&nbsp;</div>". That will push blank space at the bottom of your DIV. If you don't want all that extra space, just add "line-height: 0px;" to the style attribute of that spacer DIV. I hope this helps; good luck!

Best Regards,
Joe of Christ For Life Ministries

Jesus Christ 4 life! D