Solved

make background-color fill the div block

Posted on 2011-03-21
5
700 Views
Last Modified: 2012-08-13
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
Comment
Question by:jeremyll
5 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35179642
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
 

Author Comment

by:jeremyll
ID: 35179811
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
 
LVL 16

Assisted Solution

by:HagayMandel
HagayMandel earned 150 total points
ID: 35179942
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
 
LVL 11

Accepted Solution

by:
mattibutt earned 350 total points
ID: 35180070
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
 

Author Comment

by:jeremyll
ID: 35180145
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
What does GoogleTagMgr javascripts below do 5 26
Diminish Pop-up  in 3 seconds 7 44
styling bootstrap grid system with CSS 2 37
How to resize a div in html 3 35
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question