• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Help Me Fix This CSS, Please!

TheBigK

Well-known member
#1
My CSS Code is -

HTML:
#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 -
HTML:
<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 -

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
#2
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

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