Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute div is not postioning in relative div

    I have a div called content that I gave the position relative so everything inside would position to that div.

    When I give the other divs the absolute positioning it pulls them out of the div. What am I doing wrong?

    Here is my code
    Code:
    #content {
    	width: 940px;
    	position:relative;
    }
    
    .message {
    	width: 950px;
    	height: 25px;
    	display: inline-block;
    }
    
    .admin {
    	width: 200px;
    	border:#CCC thin solid;
    	margin: 0;
    	padding: 0;
    	position: absolute; left: 15px;
    	-moz-border-radius: 10px; 
    	-webkit-border-radius: 10px;
    	box-shadow: 0px 0px 10px #888;
    	-moz-box-shadow: 0px 0px 10px #888;
    	-webkit-box-shadow: 0px 0px 10px #888;
    	background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
    	background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
    }
    
    .misc {
    	width: 200px;
    	border:#CCC thin solid;
    	margin: 0;
    	padding: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	min-height: 50px;
    	-moz-border-radius: 10px; 
    	-webkit-border-radius: 10px;
    	box-shadow: 0px 0px 10px #888;
    	-moz-box-shadow: 0px 0px 10px #888;
    	-webkit-box-shadow: 0px 0px 10px #888;
    	background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
    	background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
    }
    
    ul {
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    	list-style-position:outside;
    	text-indent: 5px;
    }
    
    li {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	display:block;
    	width: 200px;
    	margin-bottom: 3px;
    }
    
    li a {
    	text-decoration: none;
    	color: #006;
    }
    
    li a:hover {
        padding-left: 5px;
    	color: #006;
    	text-decoration: underline;
    }
    
    .top {
    	font-variant:small-caps;
    	text-transform:capitalize;
    	display: block;
    	font-size: 16px;
    	font-family: Arial, Helvetica, sans-serif;
    	margin-bottom: 5px;
    	width: 200px;
    	height: 25px;
    	line-height:25px;
    	background-color:#CCC;
    	text-align:center;
    }

  • #2
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by mdmartiny1977 View Post
    I have a div called content that I gave the position relative so everything inside would position to that div.

    When I give the other divs the absolute positioning it pulls them out of the div. What am I doing wrong?

    Here is my code
    Code:
    #content {
    	width: 940px;
    	position:relative;
    }
    
    .message {
    	width: 950px;
    	height: 25px;
    	display: inline-block;
    }
    
    .admin {
    	width: 200px;
    	border:#CCC thin solid;
    	margin: 0;
    	padding: 0;
    	position: absolute; left: 15px;
    	-moz-border-radius: 10px; 
    	-webkit-border-radius: 10px;
    	box-shadow: 0px 0px 10px #888;
    	-moz-box-shadow: 0px 0px 10px #888;
    	-webkit-box-shadow: 0px 0px 10px #888;
    	background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
    	background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
    }
    
    .misc {
    	width: 200px;
    	border:#CCC thin solid;
    	margin: 0;
    	padding: 0;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	min-height: 50px;
    	-moz-border-radius: 10px; 
    	-webkit-border-radius: 10px;
    	box-shadow: 0px 0px 10px #888;
    	-moz-box-shadow: 0px 0px 10px #888;
    	-webkit-box-shadow: 0px 0px 10px #888;
    	background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
    	background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
    }
    
    ul {
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    	list-style-position:outside;
    	text-indent: 5px;
    }
    
    li {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	display:block;
    	width: 200px;
    	margin-bottom: 3px;
    }
    
    li a {
    	text-decoration: none;
    	color: #006;
    }
    
    li a:hover {
        padding-left: 5px;
    	color: #006;
    	text-decoration: underline;
    }
    
    .top {
    	font-variant:small-caps;
    	text-transform:capitalize;
    	display: block;
    	font-size: 16px;
    	font-family: Arial, Helvetica, sans-serif;
    	margin-bottom: 5px;
    	width: 200px;
    	height: 25px;
    	line-height:25px;
    	background-color:#CCC;
    	text-align:center;
    }
    Hi,
    On order to hold the absolute divs in a right position,
    the div containing the absolute div must be set to
    position:relative so that the absolute div can hold its position

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello mdmartiny1977,
    The only thing in your CSS that you quote that's absolutely positioned is .admin and it seems to work fine with your relative #content.

    There must be something wrong somewhere else. If you post your entire code we might be able to help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is my source code
    Code:
    <?php include('scripts/admin_script.php'); ?>
    <!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" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/admin.css" media="screen"  />
    <title>Administration Area</title>
    </head>
    <body>
    <div id="wrapper">
       <?php include('page_includes/header.php'); ?>
       <div id="content">
          <div class="message"><?php echo "$msg"; ?> <a href="logout.php">Logout</a><span style="float:right; margin-right: 5px;"><?php echo "$today"; ?></span></div>
          <div class="admin"> <span class="top">Administration</span>
             <ul>
                <li><A href="show_add.php">Add a Ad</A></li>
                <li><a href="pick_modify.php">Modify a Add</a></li>
                <li>Delete Ad</li>
                <li><a href="user/index.php">Add a User</a></li>
                <li><a href="user/pick_user.php">Delete a User</a></li>
                <li><a href="#">View Database Records</a></li>
                <li><a href="php_info.php">PHP info</a></li>
                <li><a href="make_backup.php">Backup Database</a> </li>
                <li><a href="https://p3nlmysqladm001.secureserver.net/nl50/529/index.php?lang=en-utf-8&amp;token=db052d2ddafce3f6ba841cfe0a6c224a">View Database</a> </li>
             </ul>
          </div>
          <div class="misc"><span class="top">miscellaneous</span>Classified
             Ads online <?php echo "$count"; ?></div>
       </div><!--End #content-->
       <?php include('page_includes/footer.php'); ?>
    </div>
    <!-- End #wrapper -->
    </body>
    </html>
    Here is the layout.css code
    Code:
    @charset "utf-8";
    /* CSS Document */
    body {
    	background-color:#f1f1f1;
    	font-family: georgia,sans-serif;
    	color:#333;
    	margin:0;
    	padding:0;
    	position: relative;
    }
     
    #wrapper {
    	position: relative;
    	width:960px;
    	background-color:#f8f8f8;
    	margin:0 auto;
    	border-left:1px solid #ccc;
    	border-right:1px solid #ccc;
    }
    
    #header {
    width:960px;
    height:135px;
    margin:0 auto;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    margin-top: 5px;
    }
    
    #header h2 {
    padding:10px;
    }
    
    #header h3 {
    padding:10px;
    }
    
    #content {
    	margin-left:auto;
    	margin-right:auto;
    	width:750px;
    	float:right;
    	padding:10px;
    	position:relative;
    }
    
    #sidebar {
    	border-right: #CCC thin solid;
    width:150px;
    float:left;
    }
    
    #sidebar a {
    text-decoration:none;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    color:#006;
    }
    
    #sidebar a:hover:active {
    text-decoration:underline;
    }
    
    #sidebar a:visited {
    text-decoration:none;
    }
    
    #sidebar ul {
    	margin-left: -20px;
    }
    
    #sidebar li {
    list-style:none;
    display:block;
    }
    
    #footer {
    	text-align:center;
    clear:both;
    width:960px;
    height:50px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    margin-bottom: 5px;
    }
    
    #footer p {
    padding:10px;
    }
    Here is the reset.css code
    Code:
    /* --------------------------------------------------------------
    
       reset.css
       * Resets default browser CSS.
    
    -------------------------------------------------------------- */
    
    html { 
    	margin:0; 
    	padding:0; 
    	border:0; 
    }
    
    body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, code,
    del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, dialog, figure, footer, header,
    hgroup, nav, section {
      margin: 0;
      padding: 0;
      border: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
    }
    
    /* This helps to make newer HTML5 elements behave like DIVs in older browers */ 
    article, aside, dialog, figure, footer, header,
    hgroup, nav, section {
        display:block;
    }
    
    /* Line-height should always be unitless! */
    body {
      line-height: 1.5;
      background: white; 
    }
    
    /* Tables still need 'cellspacing="0"' in the markup. */
    table { 
    	border-collapse: separate; 
    	border-spacing: 0; 
    }
    /* float:none prevents the span-x classes from breaking table-cell display */
    caption, th, td { 
    	text-align: left; 
    	font-weight: normal; 
    	float:none !important; 
    }
    table, th, td { 
    	vertical-align: middle; 
    }
    
    /* Remove possible quote marks (") from <q>, <blockquote>. */
    blockquote:before, blockquote:after, q:before, q:after { content: ''; }
    blockquote, q { quotes: "" ""; }
    
    /* Remove annoying border on linked images. */
    a img { border: none; }
    
    /* Remember to define your own focus styles! */
    :focus { outline: 0; }

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello mdmartiny1977,
    It looks like .admin is being pulled out of #content but it's really not.

    Put a background color on #content and you'll see that layout.css' #content width: 750px; is being overridden by the specificity of admin.css' #content which sets the width at 940px.

    Having CSS style an element from multiple entries is confusing enough, it gets even more confusing when those entries are in different .css files. Try to consolodate entries like that so all the styling is from one place and read a bit about specificity here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •