Solved

HTML: DIV not centered

Posted on 2012-03-10
7
374 Views
Last Modified: 2012-03-11
Hello

Why are the DIVs below not centering or show the borders I am telling footer1 to show?


<div id="footer1"></div><!-- end footer1 -->
<div id="footer2"></div><!-- end footer2 -->

#footer1{
      background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center;
      width:1014px;
      height:45px;
      margin:0 auto;padding:0;
    float:left;
      border:thick;
      border-color:0;
      left:50%;
         margin-left: -507px; /* 50% of the div's width*/
}

#footer2{
      background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center;
      width:1014px;
      height:45px;
      margin:0 auto;
      padding:0;
      text-align:left;
      clear:both;
      left:50%;
         margin-left: -507px; /* 50% of the div's width*/
}
0
Comment
Question by:adimit19
  • 4
  • 2
7 Comments
 
LVL 16

Assisted Solution

by:s8web
s8web earned 166 total points
ID: 37705351
We need to see the rest of your markup and css. Can you provide a link?
0
 

Author Comment

by:adimit19
ID: 37705388
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Solvusine</title>
<link href="css/Imports.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/custom.js"></script>
</head>

<body onload="addLanguages()";>
<form name="frmLang" method="get"><input type="hidden" id="selectedLanguage" name="selectedLangauge"/></form>
<div id="header">
      <div id= "header_logo"></div>
  <div id= "header_menu">
      <form id="form1" name="form1" method="get" action="">
        <select name="language" id="language" onchange="setLanguage()">
      </select>
        <label for="language"></label>
     
  </form>
  </div>
 </div><!-- end header -->

<div id="top_nav">
        <div id= "nav_button1"><a>cc</a></div> <!-- end nav_button1 -->
      <div id= "nav_button2"><a>cc</a></div> <!-- end nav_button2 -->
    <div id= "nav_button3"><a>cc</a></div> <!-- end nav_button3 -->
    <div id= "nav_button4"><a>cc</a></div> <!-- end nav_button4 -->
    <div id= "nav_button5"><a>cc</a></div> <!-- end nav_button5 -->
    <div id= "nav_button6"><a>cc</a></div> <!-- end nav_button6 -->
</div>
<div id="nav_spacer"></div>
<div id="top_banner"></div>
<div id="top_banner_spacer"></div>
<div id="page_display"></div>
<div id="content">
      <div id = "content_left">
          <div id = "content_leftR1"><p>cc:</p></div>
        <div id = "content_leftR2"><a>cc</a></div>
        <div id = "content_leftR3"><a>cc</a></div>
        <div id = "content_leftR4"><a>cc</a></div>    
    </div><!-- end content_left -->
    <div id = "content_middle">
          <div id = "content_middleR1"><p>cc:</p></div>
        <div id = "content_middleR2"><p>cc</p></div>
        <div id = "content_middleR3"><p>cc</p></div>
        <div id = "content_middleR4"><p>cc</p></div>
        <div id = "content_middleR5"><p>cc</p></div>    
    </div><!-- end content_middle -->
    <div id = "content_right"></div> <!-- end content_right -->
    <div id = "content_bottom1"><p>cc</p></div> <!-- end content_bottom -->
    <div id = "content_bottom2"><p>cc</p></div> <!-- end content_bottom -->
</div> <!-- end content -->
<div id="footer1"></div><!-- end footer1 -->
<div id="footer2"></div><!-- end footer2 -->






</body>
</html>


CSS FILES ARE ATTACHED
Navigation.css
Content-Area.css
Template.css
Imports.css
0
 

Author Comment

by:adimit19
ID: 37705390
There is no link to the website yet
0
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
LVL 7

Assisted Solution

by:brucepieterse
brucepieterse earned 334 total points
ID: 37705424
Hi,

Do you want it like this?
/* Template.css */
#footer_wrapper {
	width: 1018px;
	height: 45px;
}
#footer1{
	background: url(../images/spacers/WhiteSpacer.png) repeat;background-position:center; 
	width:507px;
	height:45px;
	margin:0 auto;
	padding:0;
    float:left;
	border: 1px solid #000;
}

#footer2{
	background: url(../images/spacers/WhiteSpacer.png) no-repeat;background-position:center; 
	width:507px;
	height:45px;
	margin:0 auto;
	padding:0;
	float: left;
	text-align:left;
	border: 1px solid #000;
}
.fix {
	clear: both;
}

Open in new window


<!-- index.html -->
<div id="footer_wrapper">
      <div id="footer1"></div><!-- end footer1 -->
      <div id="footer2"></div><!-- end footer2 -->
      <div class="fix"></div>
</div>

Open in new window

Template.css
0
 

Author Comment

by:adimit19
ID: 37705716
still didn't work. The DIV is not centered
0
 
LVL 7

Accepted Solution

by:
brucepieterse earned 334 total points
ID: 37706269
OK,

Just change the following then:

/* Template.css */
#footer_wrapper {
	width: 1018px;
	height: 45px;
        margin: 0 auto;
}

Open in new window

0
 

Author Comment

by:adimit19
ID: 37706702
That centered the DIV thanks.
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change Background Color of Website 5 18
Center div containing a script 6 17
Can't get container centered 4 16
styling bootstrap grid system with CSS 2 6
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

810 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