Some CSS Help Please



If i had to guess, the thing on the left is too wide so it's pushing the div you have floated right down below it. Try reducing the width of the containing div on the left a little and see if the email box pops up there.
 
Look for div id="signup". You need to add the code below to your #signup. You didn't have float:left; in there.

#signup {
background-color:#FDF8CF;
border:2px solid #D8D3A7;
float:left;
height:230px;
padding:10px;
width:228px;
}
 
AllBizNiz said:
Look for div id="signup". You need to add the code below to your #signup. You didn't have float:left; in there.

#signup {
background-color:#FDF8CF;
border:2px solid #D8D3A7;
float:left;
height:230px;
padding:10px;
width:228px;
}
Click to expand...

Thanks! I thought that by floating the main content rleft the form box would auto go to the right, how come it doesn't?
 
Clientbag said:
That's the idea, yes. No use reinventing the wheel if somebody has already done it.
Click to expand...
Speaking of which...have you been using any of the CSS frameworks much? E.g. 960.gs? I've tried it out on a few sites and it seemed to speed things up a bit once I got the hang of it. A little limiting, but still pretty nice for the right project.
 
DanielLambert said:
Thanks! I thought that by floating the main content rleft the form box would auto go to the right, how come it doesn't?
Click to expand...
Float for signup should be right and float for that wrapcontent div should be left (unless I misunderstood what you are trying to do). Daniel, were you able to get this working? The edits I made to your CSS and html should have done the trick.
 
  • Like
Reactions: DanielLambert
DanielLambert said:
Hey,

I'm practising my HTML and CSS by developing a simple squeeze page however I am having a little problem :(

My site is Grow Your Business With Great Sales Copy! and I want the enter your email form to appear on the right hand side however if I float it it just messes up, any ideas?
Click to expand...

The clear instructions are not enough, you need to add "overflow: hidden" in the div containing floated divs.
In your case you have to add "overflow: hidden" to div with id=content.

Too much redundance in so few lines of CSS. How you can format the same instructions to wrappers and to wrapped ones?

Code: 
#container #content #signup {
    background-color: #fdf8cf;
    padding: 10px;
    height: 230px;
    border: 2px solid #d8d3a7;
    width: 228px;
}
#container #content #wrapcontent {
    width: 338px;
    float: left;
}
 
You must log in or register to reply here.
Top Bottom