Solved

make background-color fill the div block

Posted on 2011-03-21
5
705 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

739 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