Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

HTML: DIV not centered

Posted on 2012-03-10
7
Medium Priority
?
382 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 664 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 7

Assisted Solution

by:Bruce Pieterse
Bruce Pieterse earned 1336 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:
Bruce Pieterse earned 1336 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

877 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