SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with 3 column div not aligning properly

    http://www.sidelinesvictoria.com/2_/

    For some reason the 3rd column aligns to the right of the bottom of the middle column, where it's supposed to be at the top of the middle to the right.

    any insight would be appreciated.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I don't know what the end result is supposed to look like, but you don't float the middle column and as a result there is no way the rigiht column can float up .

    You can switch around the HTML source order and it will line up
    Code:
    <div id="ctn">
     <div id="l"> 
      <div id="l1"> </div>
      <div id="l2"> </div>
     </div>
    
     <div id="r">
       <div id="r1"> </div>
      <div id="r2"> </div>
     </div>
     <div id="m"> 
      <div id="m1"> </div>
      <div id="m2"> </div>
     </div>
    </div>
    Place the Middle after the Right, and on "#m" switch that padding to margin.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, that fixed up the right column nicely. I attached a pic of what the end result is supposed to look like.
    Attached Images Attached Images

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Do you have any other questions? We have to wait for the image to be approved so can you upload it to photobucket or tinypic and paste the direct link here/
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another question is how to make the left/right columns shrink to fit an 800x600 / 1024x768 browser window if they're not using 1280x800. Is it possible without js? Only way I can think of would be to align the left column bgs to the right and the right column bgs to the left, then set a max-width (if you can do that), and give a percentage value to the width maybe?

    Here's a pic of the design:

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could set the parent of the 2 columns to be a min/max width setup and then have the children be percentage widths though that's a bit harder setup and you would have to cater for IE6 since it doesn't support min-width (either via expression (JS) or by adding a few extra elements and doing quiz 3's technique
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's seeming even more difficult to align the l2/r2 divs to the bottom of the container (ctn). How do you get the l/r divs to stretch the whole height of the container and then have l1/r1 sit at the top and l2,r2 sit at the bottom? height: 100&#37; is the same as height: auto, which is the same as not saying anything about height, correct? lol.. and I don't exactly want the layout to stretch to the size of the whole page either, so I can't set the containing divs (body & ctn) to 100% height.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well other then using absolute positioning and top:0;bottom:0; you can set a 100&#37; height, but that assumes that the parent has a height set already.

    height:100% means 100% of the parents height. If the height isn't set then the height:100% (or any percentage height) can't be used.

    height:auto; is the default value.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does the parent container need to have a set height in px? Or would a &#37; value suffice if body and the container were set to 100%?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As long as the parent has a set height it will be fine

    Aka if the structure is as such
    <html>
    <body>
    <container>
    <100&#37; high thing></closing divs for everything blah blah>

    As long as the container had a percentage height (which it would need also the html/body elements to have a set height) it would work yes

    As long as the element has a parent height to work off of it will work. A pixel value will also suffice and it doesn't need any other parent to have a set height
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about posting before trying, I was at work and couldn't get a break to try some stuff out. Now I seem to have the height figured out but can't get the l2/r2 to sit at the bottom of the page.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could probably give the container position:relative and then absolutely position those divs there (aka top:0;left:0; or bottom:0; or whatever . Wherever it's supposed to go )

    Also, for the .ctn, give it min-height:100&#37; and not height:100% because as it is now, it won't expand because the height is set at 100%. min-height:100% will allow it to start at 100% height but it will expand if it has enough cfontent.

    Also give IE6 this to be supported
    Code:
    * html .ctn{height:100%;}
    IE6 treats height as min-height almost so that will fix IE6 in that respect.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all of your help today Ryan!


    err you wouldn't happen to know why the bottom of the page is doing what it's doing would ya?

    The footer decides to keep going even after the content has ended and it replicates the bg.

  14. #14
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh oops sorry I looked at what I did and I changed a bunch of the images around without changing the size of the divs so everything was working just as it's supposed to lol. I guess that's why my google searches for css bugs went unanswered. :X

    Also thanks to oasmat @ http://www.webmasterforums.com/html-...tml#post101868

    for making me double check my coding

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Is everything working now?

    And no problem glad to help
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's getting close - ran into another snag though, I floated 2 divs for the left nav / right content part and found that if the float stretches past the container, it doesn't take the container with it so I added overflow: auto; to the container which worked beautifully...
    ...until I tested in IE8 where overflow: auto; drags the floats down the page quite a ways.

    Now I'm searching for IE bug fixes. I was wondering how long it would be until I encountered one of these.

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can show us the page in question-I'd like to see IE8 behaving weirdly with this .

    It might drag the float down because of the scrollbar and it not creating enough room for the floats? Try making it overflow:hidden;

    If not then please post a link
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You can show us the page in question-I'd like to see IE8 behaving weirdly with this .

    It might drag the float down because of the scrollbar and it not creating enough room for the floats? Try making it overflow:hidden;

    If not then please post a link
    http://www.sidelinesvictoria.com/2_/

    I'll play around with it a bit while I wait for your reply

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you should get your HTML and CSS validated. IE8 is picky in that regard.

    You can't have IDs or classes start with a number (aka 11/12/13) so make sure the HTML and CSS is valid before you continue any further
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Oh the l and the 1 look very simliar in Firebug..give me a minute to see what's going on . PS-I'm not seeing a drop in IE8, but I am seeing the header push down the content area down a lot.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Oh the l and the 1 look very simliar in Firebug..give me a minute to see what's going on . PS-I'm not seeing a drop in IE8, but I am seeing the header push down the content area down a lot.
    err yeah the header pushing down the content area is what I mean. It looks good in FF/Opera though

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, use these styles (in top:0; right:0; or left:0; or position;static, remove those properties from your stylesheet (don't actually set those values lol)

    Code:
    #logo
    {
    	position:static;
    	margin-top:43px;
    	float:left;
    	top:0;
    	left:0;
    }
    #search
    {
    	float:right;
    	margin-top:96px;
    	position:static;
    	top:0;
    	right:0;
    }
    #m
    {
    	margin:0;
    	float:left;
    	width:801px;
    }
    THen rearrange your HTML to place the middle before the right (there is no need to setup your 3 col layout like that anyway since the parent is a fixed width
    Code:
    <body>
    
    <div id="ctn">
     <div id="l"> 
      <div id="l1"> </div>
      <div id="l2"> <br /></div>
      <div id="l3"> </div>
     </div>
    
     <div id="m"> 
      <div id="m1"><img src="images/sidelines_logo.png" id="logo" alt="Sidelines Promotional Products - 
    
    Your one stop promotional products shop"  />
      <img src="images/search.png" id="search" alt="Search our site"  /></div>
      <div id="mM">
       <div id="nL">asdf</div>
       <div id="nR">
         <p>asd60<br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
      </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p><br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
         </p>
       </div></div>
      <div id="m2"> </div>
     </div>
     <div id="r">
      <div id="r1"> </div>
      <div id="r2"> </div>
      <div id="r3"> </div>
     </div>
    </div>
    
    </body>
    That patches everything up
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #24
    SitePoint Enthusiast Keenan's Avatar
    Join Date
    Feb 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried what you said and it *almost fixes it, except now more stuff is broken.

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Here is the full 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.sidelinesvictoria.com/2_/" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sidelines Promotional Products Inc.</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->
    <style>
    #logo
    {
    	position:static;
    	margin-top:43px;
    	float:left;
    	top:0;
    	left:0;
    }
    #search
    {
    	float:right;
    	margin-top:96px;
    	position:static;
    	top:0;
    	right:0;
    }
    #m
    {
    	border:1px solid blue;
    	margin:0;
    	float:left;
    	width:801px;
    }
    </style>
    </head>
    <body>
    
    <div id="ctn">
     <div id="l"> 
      <div id="l1"> </div>
      <div id="l2"> <br /></div>
      <div id="l3"> </div>
     </div>
    
     <div id="m"> 
      <div id="m1"><img src="images/sidelines_logo.png" id="logo" alt="Sidelines Promotional Products - 
    
    Your one stop promotional products shop"  />
      <img src="images/search.png" id="search" alt="Search our site"  /></div>
      <div id="mM">
       <div id="nL">asdf</div>
       <div id="nR">
         <p>asd60<br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
      </p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p>&nbsp;</p>
         <p><br />
           <br />
           <br />
           <br />
           <br />
           <br />
           <br />
         </p>
       </div></div>
      <div id="m2"> </div>
     </div>
     <div id="r">
      <div id="r1"> </div>
      <div id="r2"> </div>
      <div id="r3"> </div>
     </div>
    </div>
    
    </body>
    </html>
    What exactly is breaking???
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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