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 11 of 11

Thread: Div positioning

  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div positioning

    I'm a div positioning noob. This is my first ever attempt at a table-less layout.

    So far I have this:

    [link removed]

    which looks fine in Firefox, but with IE the copright div scrunches up into the space underneath the left navigation. Why?

    Also, if you happen to be looking through my CSS and find other mistakes or bad habits that I'm forming... please slap me on the wrist, post haste!

    Thanks very much!
    Last edited by VIPStephan; 02-27-2011 at 11:16 AM. Reason: link removed upon request

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    136
    Thanks
    39
    Thanked 1 Time in 1 Post
    Well this is difficult to answer since you haven't posted the CSS code. However, try putting in the code for the Copyright section:
    clear: both;
    If that does not work, try experimenting with the 'float' of the box.
    eg.
    float: left;
    or
    float: right;

    If this doesn't work then post the CSS code.
    Last edited by webguy08; 11-17-2008 at 11:57 PM.

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webguy08 View Post
    Well this is difficult to answer since you haven't posted the CSS code. However, try putting in the code for the Copyright section:
    clear: both;
    This seems to work great! Thank you!

    Does clear:both; take the floats (left or right) and cancel them and create a "return" to the next line, in a manner of speaking? I'm sure I'm missing something still, and I'd like to know HOW IT WORKS too.. let me know if I'm close.

    Thanks again!

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Clear: both says to look at the previous elements of the page and start below the closest one. (sort of what you said)

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah crap, I think it's still screwed up. I thought it had before because I viewed it in Firefox, but the problem was with IE.

    here is the URL again... I'm trying to get the #copyright to appear below the #main_content using Internet Explorer:

    [link removed]

    the css is here:
    Code:
    body {font-size:10pt;font-family:verdana;color:#258;margin:0;padding:0;border:0;background:#fff;background-image:url('images/faire-.jpg');background-repeat:repeat-x;background-position:top left;}
    table, tr, td, div {margin:0;padding:0;border:0;}
    a {color:#47a;text-decoration:none;}
    a:hover {text-decoration:underline;}
    #title_elements {margin:23px 0 0 0;}
    #title_elements div {float:left;}
    #title_elements div .title {width:247px;background-image:url('images/title.png');}
    #title_elements a {background-image:url('images/links.png');margin:0 23px;height:43px;background-repeat:no-repeat;display:block;text-indent:-999px;overflow:auto;}
    .link1_up   {width:111px;background-position:top left;}
    .link1_over {width:111px;background-position:bottom left;}
    .link2_up   {width:165px;background-position:-111px 0;}
    .link2_over {width:165px;background-position:-111px -43px;}
    .link3_up   {width:212px;background-position:top right;}
    .link3_over {width:212px;background-position:bottom right;}
    #body_wrapper {position:absolute;top:100px;left:23px;width:900px;}
    #left_nav {float:left;width:130px;}
    #left_nav p {text-align:justify;text-indent:1em;}
    #left_nav a {font-size:1.3em;font-weight:bold;display:block;}
    #main_content {float:right;width:750px;margin-top:-17px;#margin-top:0;}
    #main_content p {text-align:justify;text-indent:2em;}
    #main_content p.header {font-size:1.3em;font-weight:bold;color:#47a;text-indent:0;}
    #copyright {clear:both;float:left;margin:43px 0;}
    #faithful {font-weight:bold;}
    I added the clear:both; to #copyright, but it doesn't seem to accomplish anything (I thought it had before because I viewed it in Firefox, when the problem is in IE). When I remove the float:left; in #copyright, it appears in the correct position under #main_content in FF/IE, but the 43px top/bottom margin gets pwned somehow in FF. Is using clear:both; in conjunction with a float considered improper css? Or is it acceptable and just producing undesired results? I just want the copyright at the bottom!!

    As I said... if you find any woefully incompetent styling or page structure, please feel free to let me know so, I can break bad habits before they form.
    Last edited by VIPStephan; 02-27-2011 at 11:16 AM. Reason: link removed upon request

  • #6
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    I am in sort of a hurry, so didnt have the time to look way into this, my apologies. But the problem might be the two css errors.

    Looks like you might have just misplaced a semi colon or two in your css. Hope that is of some help.

    Best Wishes,

    Drew
    Last edited by VIPStephan; 02-27-2011 at 11:17 AM. Reason: link removed upon request
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Assembled code.

    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>
      <base href="http://www.example.com/" />
    
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <meta name="keywords" content="" />
        <meta name="description" content="example.com" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <title>Example</title>
       <style type="text/css">body {
         font-size: 10pt;
         font-family: verdana;
         color: #258;
         margin: 0;
         padding: 0;
         border: 0;
         background: #fff;
         background-image: url('images/faire-.jpg');
         background-repeat: repeat-x;
         background-position: top left;
       }
    
       table, tr, td, div {
         margin: 0;
         padding: 0;
         border: 0;
       }
    
       a {
         color: #47a;
         text-decoration: none;
       }
    
       a:hover {
         text-decoration: underline;
       }
    
       #title_elements {
         margin: 23px 0 0 0;
       }
    
       #title_elements div {
         float: left;
       }
    
       #title_elements div .title {
         width: 247px;
         background-image: url('images/title.png');
       }
    
       #title_elements a {
         background-image: url('images/links.png');
         margin: 0 23px;
         height: 43px;
         background-repeat: no-repeat;
         display: block;
         text-indent: -999px;
         overflow: auto;
       }
    
       .link1_up {
         width: 111px;
         background-position: top left;
       }
    
       .link1_over {
         width: 111px;
         background-position: bottom left;
       }
    
       .link2_up {
         width: 165px;
         background-position: -111px 0;
       }
    
       .link2_over {
         width: 165px;
         background-position: -111px -43px;
       }
    
       .link3_up {
         width: 212px;
         background-position: top right;
       }
    
       .link3_over {
         width: 212px;
         background-position: bottom right;
       }
    
       #body_wrapper {
         position: absolute;
         top: 100px;
         left: 23px;
         width: 900px;
       }
    
       #left_nav {
         float: left;
         width: 130px;
       }
    
       #left_nav p {
         text-align: justify;
         text-indent: 1em;
       }
    
       #left_nav a {
         font-size: 1.3em;
         font-weight: bold;
         display: block;
       }
    
       #main_content {
         float: right;
         width: 750px;
         margin-top: -17px;
         margin-top: 0;
       }
    
       #main_content p {
         text-align: justify;
         text-indent: 2em;
       }
    
       #main_content p.header {
         font-size: 1.3em;
         font-weight: bold;
         color: #47a;
         text-indent: 0;
       }
    
       #copyright {
         clear: both;
         float: left;
         margin: 43px 0;
       }
    
       #faithful {
         font-weight: bold;
       }
       </style>
      </head>
      <body>
        <div id="title_elements">
          <div><a class="title" href="http://www.example.com">example.com home</a></div>
          <div><a class="link1_up" onmouseover="this.className='link1_over'" onmouseout="this.className='link1_up'" href="the-band">the band</a></div>
          <div><a class="link2_up" onmouseover="this.className='link2_over'" onmouseout="this.className='link2_up'" href="toddler-tunes">toddler tunes</a></div>
          <div><a class="link3_up" onmouseover="this.className='link3_over'" onmouseout="this.className='link3_up'" href="commercial-work">commercial work</a></div>
        </div>
        <div id="body_wrapper">
          <div id="left_nav">
    
    <a href="index.htm">News</a>
    <a href="about.htm">About</a>
    <a href="pictures.htm">Pictures</a>
    <a href="media.htm">Media</a>
    
          </div><!--left_nav-->
          <div id="main_content">
            <div>
    	  <p class="header">Main Content</p>
    	  <p>
    
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd guber gren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd guber gren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    
    	  </p><p>
    
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd guber gren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
    
    	  </p><p>
    
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    
    	  </p>
    	</div>
          </div><!--main_content-->
          <div id="copyright">
            Copyright &copy; <b>Example</b> and <b>Example’s Tunes</b>. All rights reserved. Designed and developed by <a id="faithful" href="http://www.example.com">Example</a>.
          </div>
        </div><!--body_wrapper-->
      </body>
    </html>
    This seems a bit odd.


    #main_content {
    float: right;
    width: 750px;
    margin-top: -17px;
    margin-top: 0;
    } - margin-top twice??

    I've put it here.


    Frank

    I've put it here.
    Last edited by VIPStephan; 02-27-2011 at 11:20 AM. Reason: identifying content removed
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New Coder
    Join Date
    Jan 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Edit: I see that as you've uploaded it to exitfegs that it puts the CSS in the HTML document and doesn't show the actual CSS that I've written for that item. So to understand what I've written below, here is the original CSS for #main_content, in its entirety.

    Code:
    #main_content {
    float: right;
    width: 750px;
    margin-top: -17px;
    #margin-top: 0; 
    }
    The #margin-top apparently is supposedly only read by one browser out of FF/IE (I'm not sure which, and I was told that I could use that CSS hack to get the right affect in a cross-browser situation, even though the CSS would not validate) so I think margin-top is read by both browsers, and #margin-top is read by only one, overwriting the original value and making it therefore look correct.

    I'm sure this is somehow very wrong.. whats a better way to do it? I'm aware that CSS hacks are terrible semantically... but I don't know any way around IE's box model problems other than that.
    Last edited by reapercharlie; 11-18-2008 at 06:28 PM.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    put your new code in.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    New Coder
    Join Date
    Jan 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    put your new code in.

    Frank
    what do you mean?

  • #11
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    okay i think here's your problem
    Code:
    #left_nav {float:left;width:130px;}
    #main_content {float:right;width:750px;margin-top:-17px;#margin-top:0;}
    #copyright {clear:both;float:left;margin:43px 0;}
    you'll notice that you are floating your divs right? just think of your divs as blocks that occupies a certain free space..

    in your case, your leftnav floats to the left and then your content floated to the right, eventually the copyright which was floated to the left, found a space so it jumps right to it and then occupied it..

    so here's the correct way of using the clear: style..

    Code:
    #left_nav {float:left;width:130px;}
    #main_content {float:left;width:750px;margin-top:-17px;#margin-top:0;}
    #copyright {float:left;}
    .clear {clear:both;}

    Code:
    <div id ="wrap">
      <div id ="left_nav"></div>
      <div id ="content"></div>
      <div class ="clear"></div>
      <div id ="copyright"></div>
    </div>
    just adjust whatever you want to do with it.. hope it helps..


  •  

    Posting Permissions

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