Ask your WordPress questions! Pay money and get answers fast! (more info)

make div width for header

  • SOLVED

Hi, I got great help here last night to make the roll over effect on the header. Tonight I would like to control the width of just the "one-half" and "one half Last" of only the divs in that header area. I don't want the shortcode to alter all the one half or one half last.

http://203.170.85.26/~rocksoli/

Here is the CSS I have already, I think I am on the right track, but I do not know which one to select to alter the width of the Phone and Email "one-half"

(What I would like is the blocks for email and phone to be width 44% with margin-right 3%)

#one_half, phone, email {
display: inline;
float: left;
margin-right: 3%;
overflow: hidden;
position: relative;
width: 44%;
}


Above is what I am trying to do, but I know the css selectors are wrong, I just need help to correct it.

Thank you.

Answers (3)

2012-07-14

Martin Pham answers:

try this

.one_half .phone, .one_half .email {

display: inline;

float: left;

margin-right: 3%;

overflow: hidden;

position: relative;

width: 44%;

}


Martin Pham comments:

readmore
[[LINK href="http://www.ravenglass.com/blog/index.cfm/2009/5/8/CSS-Child--Descendant-Selectors"]]http://www.ravenglass.com/blog/index.cfm/2009/5/8/CSS-Child--Descendant-Selectors[[/LINK]]


Ciaran Whelan comments:

Hi Martin, I tried that, but it did not work correctly. I almost thought it would work perfect with your code. Thank you for giving me the link to learn more on selecting Child descendant Selectors. As I couldn't for the life of me figure out the name for this. This is my greatest weakness trying to figure out the child selector.

2012-07-14

Arnav Joy answers:

go to line no 51 to your style file at following location

~rocksoli/wp-content/themes/rocksolid/css/text.css

find out following lines

.one_half {
display: inline;
float: left;
margin-right: 4%;
overflow: hidden;
position: relative;
width: 48%;
}

and replace with

.one_half {
display: inline;
float: left;
margin-right: 3%;
overflow: hidden;
position: relative;
width: 44%;
}


Arnav Joy comments:

i would also like to tell you what you are not doing in your following code

#one_half, phone, email

"#" symbol is used for the id and "." for the class

one_half is class not a id , so you should use

.one_half

also for phone and email you should use

.phone .email


Arnav Joy comments:

one more thing , if you want to later the css for only header then you should not modify directly .one_half , since it will modify its css and if you use it any where else then it will take that new css .

So if you want to change the css for only header part then you should use following

.colwrapper .one_half{
width: 44%;
margin-right:3%;
}


Ciaran Whelan comments:

Thank you Arnav, that worked perfect. I edited it slightly to make it relevant for #container-36

#container-36 .colwrapper .one_half{
width: 44%;
margin-right:3%;
}

Do I need to have the .colwrapper in that line?


Arnav Joy comments:

no you do not need to include that...


Ciaran Whelan comments:

Perfect Thank you...

2012-07-14

Hai Bui answers:

Try this
.one_half .phone, .one_half .email {
display: inline;
float: left;
margin-right: 3%;
overflow: hidden;
position: relative;
width: 44%;
}


Hai Bui comments:

Well.... it may not work because the container width/layout is not correct


Ciaran Whelan comments:

Thank you Hai, I tried your solution, but unfortunately it did not work. Arnav has solved this for me.