Advanced Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsWeb DesignAdvanced Web Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old July 2nd, 2012, 01:23 AM
Alicia Alicia is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Sep 2003
Posts: 122 Alicia User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 3 h 29 m 24 sec
Reputation Power: 15
Not able to align div correctly

Hi,

Can some guru help me to check what have I done incorrectly in this simple css layout? After I adjusted the div on top before the content div, the content and footer div is all aligned to far right which I never adjusted. I tried to move it back inside the container and align the content to left but failed. I am wondering how come the div from content to footer will move to such position.

Besides, can you give me an idea what I have done on the top positioning is correct or not. I can get the positioning of the div i want on top before the content but i am wondering why negative value is required to make it fit into the container.

Please advise and thanks.

Code:
<!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>Untitled Document</title>
<style type="text/css">
#page-container {
    width: 960px;
    margin: 0 auto;
}

#main-nav {
    height: 30px;
    position: relative;
    background-color: #CFF;
    width: 300px;
    top: -95px;
    left: -145px;
    float: left;
}

#sidebar-a {
    background: darkgreen;
    float: left;
    position:relative;
}

#content {
    background: green;
    width: 960px;
    position: relative;
}

#footer {
    background: orange;
    height: 66px;
}

#logo {
    width : 200px;
    height: 100px;
    margin-top:52px;
    padding-left:10px;
    position: relative;
}

#mailinglistbox {
    width : 450px;
    height: 50px;
    background-color:#09F;
    margin-right:220px;
    float:left;
    position: relative;
    left: 225px;
    top: -115px;
}

#topcontactbox {
    width : 250px;
    height: 30px;
    background-color:#FF6;
    margin-right:120px;
    float:left;
    position: relative;
    left: 695px;
    top: -155px;
}

body {
    margin-top: 0px;
    background-image: url(images/mainbg.jpg);
    background-repeat: repeat-x;
    background-color: #F0F4F5;
}

</style>
</head>
<body>
<div id="page-container">
  <div id="logo"><img src="images/logo.gif" width="179" height="82" /></div>
  <div id="mailinglistbox">mailing list box</div>
    <div id="topcontactbox">contact</div>
    <div id="main-nav">Main Nav</div>
    <div id="content">Content</div>
    
    <div id="footer">Footer</div>

</div>
</body>
</html>



Reply With Quote
Reply

Viewing: Dev Articles Community ForumsWeb DesignAdvanced Web Development > Not able to align div correctly


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap