Help Me Fix This CSS, Please!


Well-known member
My CSS Code is -

display: box;
border: 1px solid #C8C8C8; 
border-radius: 5px;
padding: 5px;
#welcomebox .boxleft {
width: 600px;
float: left;
font: 11pt Verdana;
#welcomebox .boxright {
width: 240px;
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 class="boxright">
<label id="SignupButton" for="LoginControl">
<a class="inner" href="index.php?login/">Sign Up Now!</a>
...and I put this html in the ad_below_top_breadcrumb template. As a result, I got this -

Screen Shot 2013-01-07 at 7.29.26 PM.png

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

Chris D

XenForo developer
Staff member
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.


Well-known member
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!