Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 728
  • Last Modified:

make background-color fill the div block

http://asqastage.esa.edu.au/subscribe-for-updates.html

how do you make the dark grey background colour (#E5E4E4) in 'subscribe me to:' and 'i am a:' go down to the same level as it's corresponding input field?

The other fields dont have the same problem because chracters in their respective divs fit in one line.


0
jeremyll
Asked:
jeremyll
2 Solutions
 
Gurvinder Pal SinghCommented:
label's background-color is
rgb(229, 228, 228);

and the input field's is
rgb(241, 241, 241);

In style.css, you need to change
.formContainer .column1Item {
      background-color:#e5e4e4;color:#444444;padding:10px;font-weight:bold;margin:0;float:left;width:188px; font-size:0.875em;
}

with

.formContainer .column1Item {
      background-color:rgb(241, 241, 241);
      color:#444444;padding:10px;font-weight:bold;margin:0;float:left;width:188px; font-size:0.875em;
}
0
 
jeremyllAuthor Commented:
Thanks gurvinder372

I don't think I've explained my question clearly.

The label's background-color is meant to be rgb(229, 228, 228);

I'm not worried about the color. The labels with the dark grey background color is meant to fill up so that there are no white areas which 'subscribe me to:' and 'i am a:' has. There's just a 1px gap between the label div and the input div.

0
 
HagayMandelCommented:
It's a matter of div's height, that you cant control without javascript.:
You need a script that checks each "input" div's height and assigns the same height to the "label" div.
My 50 cents, put it all in a 2 columns table and forget all about it, or add the following rule to the CSS
.formContainer
{
   background-color: #E5E4E4;
}

Open in new window

0
 
mattibuttCommented:
hello mate,

try adding: style="height:159px;"

just like this...

<div class="column1Item" style="height:159px;">I am a: </div>


and: style="height:60px;"

just like this...

<div class="column1Item" style="height:60px;">Subscribe me to: </div>

the reason why i have done in-line CSS styling is because your classes have the same name, you can do this in your external CSS too if you like, you just have to add a new and different named ID to each field and call them in your code, it is the same thing anyway just 2 different ways of doing it...


Cheers

0
 
jeremyllAuthor Commented:
wow, thanks guys. I'm conviced that I just have to put a fixed height. was hoping to use an 'auto' value somewhere to 'auto fill'. there goes that idea.

Thanks!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now