Help Me Fix This CSS, Please!

[TheBigK]

My CSS Code is -

#welcomebox{
display: box;
border: 1px solid #C8C8C8; 
border-radius: 5px;
padding: 5px;
}
 
#welcomebox .boxleft {
width: 600px;
height:
float: left;
font: 11pt Verdana;
}
 
#welcomebox .boxright {
width: 240px;
float:left;
}

and the HTML I'm using is -

<div id="welcomebox">
 
 
<div class="boxleft">
Welcome to <b>CrazyEngineers (CE)</b> - Feel free to ask questions / doubts or discuss your ideas with over <b>141,000</b> engineers just like you signed up from 180 countries! Joining is free, why not join today? Joining is completely free and takes less than a minute to complete!
</div>
 
<div class="boxright">
 
<label id="SignupButton" for="LoginControl">
<a class="inner" href="index.php?login/">Sign Up Now!</a>
</label>
</div>
 
 
</div>

...and I put this html in the ad_below_top_breadcrumb template. As a result, I got this -



Now, I want the sign-up button to be displayed inside the box, well aligned with the text. What am I doing wrong?

 

[Chris D]

Well, firstly, you have an empty "height" property in your CSS.

Your CSS will be rendering as:

height: float: left;

Which is invalid.

You might also want to consider using percentages as you widths as well. That way it will scale better on multiple screen sizes.

 

[TheBigK]

Atta Boy! I added the height property and made the widths in percentages. I've a fixed layout, so it won't break anyway :-D

Thanks a ton, Chris!