Div Tag Problems

HTML & CSS
1

So I want to remove the div tag for two pages of my site but I can’t figure out how to do so without messing up the layout of my page.

Link to Screenshot

The image on the left is what happens after I delete the div tag and the one on the right is when it is intact.

I don’t want that gap between the content area and the header. Also it doesn’t do that in dream weaver only in the browsers.

Can anyone help me?

Code with Div


<head>
<title>Sigma Lambda Sigma</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../Templates/charitable-organization/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #58B0e3;
}
.style1 {color: #FFFFFF}
.style2 {color: #58B0e3}
-->
</style></head>
<body>
<div id="container">
  <div id="header">
    <ul>
      <li><a href="index.html"><strong>Home</strong></a></li>
      <li><a href="about.html">About</a><a href="service.html">Service</a></li>
      <li><a href="philanthropy.html">Philanthropy</a></li>
      <li><a href="members.html">Members</a></li>
      <li><a href="alumni.html">Alumni</a></li>
      <li class="style1"><a href="join.html">Join Us</a></li>
      <li> <a href="contact.html"><span class="style1">Contact </span></a></li>
    </ul>
    <img src="Images/header.jpg" width="717" height="288" /></div>
  <div id="content">
    <div align="left" id="left">
      <h1 class="style2"><span style="color:rgb(51, 102, 255);">blah</span></h1>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/Sigma-Lambda-Sigma-Service-Sorority/203075126411924" width="292" show_faces="false" border_color="" stream="false" header="false"></fb:like-box></p>
      <h1>&nbsp;</h1>
      <div id="photos"></div>
    </div>
    <div id="footerline"></div>
  </div>
  <div id="footer">2011</div>
</div>
</body>
</html>
2

Hi, Welcome to SitePoint:)

You’ll need to post your CSS (or provide a link) and then tell us which div tag you want to remove as there are a lot of them in the code above.

3

The left one and…


body {
	background-color:#a6bf79;
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 10px 10px;
	padding: 0px;
}
.clear{clear:both;}
* {
	margin: 0px;
	padding: 0px;
}
#container {
	margin: 0px auto;
	text-align: left;
	width: 717px;
}
a{
	font-size:12px;
}
p{
	margin: 15px 0px;
}
/********************** Header ***************************/
#header {
	margin: 0px 0px 0px 0px;
	background-image:url(Images/banner.jpg);
	width:717px;
	height:288px;
	position:relative;
	overflow: hidden;
}
#header ul{
	background-color:#797B7D;
	width:711px;
	border: 3px solid #FFFFFF;
	display:block;
	top:255px;
	position:absolute;
	margin: 0px 0px 0px 0px;
	height:22px;
	padding:5px 0px 0px 0px;
	text-align:center;
}
#header li{
	display:inline;	
}
#header ul a{
	text-decoration:none;
	color:#FFFFFF;
	margin: 0px 15px;
}
#header ul a:hover{
	text-decoration:underline;
	color:#28556b;
}
#logo_w1,#logo_w2 {
	font-size: 24px;
	font-style:italic;
	color:#FFFFFF;
	position:absolute;
}
#logo_w1{
	top:15px;
	left:70px;
}
#logo_w2{
	top:44px;
	left:94px;
}
#header_text {
	top:90px;
	left:43px;
	width:230px;
	position:absolute;
}
#header_text p{
	font-size: 18px;
	color:#FFFFFF;
}
#header_text a{color:#28556b;}
#header_text a:hover{color:#c77e0c;}
/********************** Content ***************************/
#content {
	background-image:url(images/content_bg.gif);
	width:717px;
}
img{
	border-width:0px;
}
h1{
	color:#000000;
	font-size:14px;
	margin: 20px 0px 20px 0px;
}

h2{
	color:#85a157;
	font-size:14px;
	text-align:center;
	width:200px;
	margin: 10px 0px 15px 0px;
}
#left {
	float:left;
	width:417px;
	margin-left:27px;
	display:inline;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 0px;
}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c;}
#photos a{
	margin-right:14px;
}
#right {
	float:right;
	width:210px;
	padding: 0px 20px 20px 20px;
	margin-top:10px;
	border-left: #FFF 2px solid;

}
#right a{
	color:#c77e0c;
}
#right a:hover{
	color:#85a157;
}
/********************** Footer ***************************/
#footerline {
clear:both;
background-image:url(images/footer_bg.gif);
font-size:1px;
height:10px;
}
#footer {
	width:717px;
	text-align:center;
	padding: 20px 0px;
}

I believe that is it.

4

Hi,

I’ll have to us my telepathic powers then :slight_smile:

I’m guessing that you are talking about removing the #left wrapper although you said “the left one” which was a little confusing.

Removing #left makes the parent of the h1 Content instead which is not floated and therefore the 20px margin on the h1 collapse onto Content instead and moves it 20px down the page causing a gap.

To stop the margin collapse add a 1px padding to Content.


#content {
    padding:1px 0 0;
}

Am I close or are my telepathic powers fading with old age :slight_smile:

5

Sorry for being confusing!

I was talking about the div#left and I only want it removed and the gap taken off of a page or two. I haven’t written code in about 3 years so I am extremely lost.

I learned how to make it work but it effects every page and not just the one.

Sorry for being difficult. I know the coding there is for the style sheet but how do I get it to only effect the one page?

6

Never mind! You sir are a scholar and a gentleman!

Your abilities are still spot on thank you!