Accessibility

CSS Advisor

Issues inside Dream Weaver with DIV container positioning

by theemovado on October 5, 2012 Avg Rating 5.0 (2)   |   Log in to rate post.

Tagged with block , Explorer 8.0 , DIV id , not under the category POSITIONING , Position , Google Chrome , Float , In DW I have mostly dealt with settings under the BOX category

Problem

My DIV containers have been properly defined in CSS to position #1 The body container to be centered in a fixed pixel design, #2 Wrapper to follow, #3 Header to follow, #4 left column to float left. However,#1 my body container, wrapper, header and left column are all displaying fixed at 0-x and 0-y, in DW and my browser when I preview , and #2 my left column is on top of my header.

Solution

I am new at this so I don't have a proposed solution. I am thinking that there is an issue with DW, but code should be code even if done in notepad. Please tell me what have done incorrectly. Thank you so much. I am working from Google Chrome if that makes any difference.

Detailed description

 

 

  Here is my CSS. 

 

* {/* universal selector defined and used to make all tags in site have a margin and padding setting of 0*/ 
margin: 0px;
padding: 0px;
}
 
body {
text-align: center; /*this definition is used to center body for old IE versions*/
background-color: #e7d7ca;
}
 
 
#wrapper {
width: 841px;
margin-top: 0px;
margin-right: auto; /*defining the left and right margins AUTO centers the wrapper*/
margin-bottom: 0px;
margin-left: auto;
position: relative;
text-align: left; /*definition used to put everything back to its default aligning all elements in this 
   container which contains all of the site's content left */
}
#header {
background-image: url(../images/branding.gif);
height: 130px;
width: 841px;
background-repeat: no-repeat;
}
 
#lcol {
background-color: #996;
float: left;
width: 260px;
}
 
 
 
 
And here is my 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>killersites typographic example</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
<div id=wrapper">
<div id="header">
 
      <div id="lcol">Content for  id "lcol" Goes Here
      </div><!--ends lcol content -->
    
    
    
    
    </div><!--ends header content -->
 
 
 
 
 
 
 
</div><!--ends id wrapper content -->
</body>
</html>
 
 
 




Tagged with block , Explorer 8.0 , DIV id , not under the category POSITIONING , Position , Google Chrome , Float , In DW I have mostly dealt with settings under the BOX category

Tag it on del.icio.us or Digg

Text ID: ISSUES_INSIDE_DREAM_WEAVER_WITH_DIV_CONTAINER_POSITIONING_


Comments (2)

To add a comment, please Log in.




Header tag

by BigGil82 on January 20, 2013

Not so much a fix but more friendly advice..........Instead of having <div id="header"> you could simply use <header>. You can also do the same for your footer tags.

Missing a "

by Oregoner on December 6, 2012

A little late but are you missing a quote here?: <div id=wrapper">





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (98)
Mozilla/Firefox (49)
Opera (17)
Safari (35)
CSS Properties
Background (22)
Border (8)
Color (8)
Float (22)
Font (5)
Margin (10)
Padding (8)
Position (39)
Text (27)
Width/Height (23)