css layout question

Hi Guys,

I downloaded a template to use in visual web developer 2010 express.
In the header there is the logo on the left, and the copyright section to the right.
I created a new <div>="TESTAREA" and the goal is to put the box in the middle, same height, as the logo and copyright section.  I cant seem to center this between the right and left, any suggestions?

thanks



	<div id="header">
		<div id="logo">
			<h1><a href="#">Big Business</a></h1>
		</div>

        <div id=TESTAREA">
  
        <h1>this is my new area</h1>
        
            </div>





		<div id="slogan">
			<h2>Template design by Free CSS Templates</h2>
		</div>
	</div>

Open in new window



#header {
	height: 75px;
	position: relative;
	background: #6E6E6E url(images/img03.jpg) top left no-repeat;
	padding: 45px;
	color: #FFFFFF;
	width: 888px;
	border: solid 1px #7E7E7E;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden;
}

#logo {
	line-height: 160px;
	height: 160px;
	padding: 5px 0 0 0;
	position: absolute;
	top: 0;
	left: 45px;
    width: 279px;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 1px 1px #3E3E3E;
}

#logo h1 {
	font-size: 3.25em;
}

#slogan {
	line-height: 160px;
	height: 160px;
	padding: 5px 0 0 0;
	position: absolute;
	right: 45px;
	top: 0;
}

#slogan h2 {
	color: #BEBEBE;
	font-size: 1.25em;
	text-shadow: 0 1px 1px #3E3E3E;
}

#TESTAREA {
    line-height: 160px;
    height:160px;
    padding: 5px 0 0 0;
    position:absolute;
    top:0;
    
}

Open in new window

solarissfAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
You already have position:absolute in the TEXTAREA div so just add left:330px to push the div left as far as you need it. Adjust top as desired.
0
 
solarissfAuthor Commented:
added, but doesnt move at all????
#TESTAREA {
    line-height: 160px;
    height:160px;
    padding: 5px 0 0 0;
    position:absolute;
    left:700px;
    top:0;
   
}


nevermind... it did move... other than moving it visually , is there a way to center it?
0
 
Tom BeckCommented:
Your div is missing a quote around TEXTAREA.
0
 
solarissfAuthor Commented:
thanks,  is there a way to actually center it between other 2 elements?
0
 
Tom BeckConnect With a Mentor Commented:
Sure. You could remove all the position:absolute, top, right, and left then add float:left and margin:auto to the slogan, logo and TEXTAREA.
#header {
      height: 75px;
      position: relative;
      background: #6E6E6E url(images/img03.jpg) top left no-repeat;
      color: #FFFFFF;
      padding:45px;
      width: 888px;
      border: solid 1px #7E7E7E;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      overflow: hidden;
}

#logo {
      line-height: 60px;
      height: 160px;
      padding: 5px 0 0 0;
    width: 279px;
    float:left;
    margin:auto
}

#logo a {
      text-decoration: none;
      color: #FFFFFF;
      text-shadow: 0 1px 1px #3E3E3E;
}

#logo h1 {
      font-size: 3.25em;
}

#slogan {
      line-height: 60px;
      height: 160px;
      padding: 5px 0 0 0;
      float:left;
    margin:auto
}

#slogan h2 {
      color: #BEBEBE;
      font-size: 1.25em;
      text-shadow: 0 1px 1px #3E3E3E;
}

#TESTAREA {
    line-height: 60px;
    height:160px;
    padding: 5px 0 0 0;
    left:330px;
    float:left;
    margin:auto
   
}

I also reduced the line-height to 60px. I'm not even sure why that's there to begin with.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.