SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with 2 column layout

    So i've been looking at douglas layout :
    link
    Here's my layout:
    Code:
    |---------------------------------------------------------|
    |             |                                           |
    |             |            Image                          |
    |   Logo      |                                           |
    |             |-------------------------------------------|
    |             |                                           |
    | ----------- |     MAIN                                  |
    |xxx          |                                           |
    |xxx   N      |                                           |
    |xxx   A      |                                           |
    |xxx   V      |                                           |
    |xxx   I      |                                           |
    |xxx   G      |                                           |
    |xxx   A      |                                           |
    |xxx   T      |                                           |
    |xxx   I      |                                           |
    |xxx   O      |                                           |
    |xxx   N      |                                           |
    |xxx          |                                           |
    |xxx          |                                           |
    |xxx          |                                           |
    |xxx          |                                           |
    |xxx          |                                           |
    |-------------|-------------------------------------------|
    It's a basic 2 column layout. The left side xxx is a solid strip that will reapeat vertically beneth the list navigation.
    My problems: I'm not sure how i would get it so that the left side would always line up with the right side(content side). I dont want the right side to overflow the left side.

  2. #2
    SitePoint Wizard dethfire's Avatar
    Join Date
    Aug 2000
    Posts
    2,477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    set the divs for a fixed height
    Free Science Homework Help
    http://www.physicsforums.com

  3. #3
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wouldn't work i need the main content to be fluid.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you need to have another look at Dougs site at the techniques involved.

    Using his method the left and right columns will always be the same length because they are in fact the same element. The idea is to use the border of the element to produce the illusion of another column and your content is floated over this widened border.

    I'm sure Doug will explain this much better but here is a two column design using Doug's technique.
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .wrapborder {border:1px solid black;width:401px} /*thanks to dougbtx for this*/
    .wrapper {
     border-right:300px solid yellow;
     width:100px; 
     background-color: #FFFFCC;
    }
    .outer {
     position:relative;/*hack for mozilla*/
    }
    .outer p {margin:0px;}
    .left {
     border-right: 1px solid #000000; 
    }
    .right {
     position:relative;
     width: 300px;
     float: right;
     border-left: 1px solid #000000;
     margin-right:-300px;
     z-index:100;
     }
    -->
    </style>
    </head>
    <body>
    <div class="wrapborder"> 
      <div class="wrapper"> 
    	<div class="outer"> 
    	  <div class="right"> 
    		<p>right content goes here : right content goes here :right content goes 
    		  here :</p>
    		<p>right</p>
    		<p>right</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    	  </div>
    	  <div class="left"> 
    		<p>Left content goes here : Left content goes here : Left content goes 
    		  here : </p>
    		<p>leftcontent</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    		<p>l</p>
    	  </div>
    	</div>
      </div>
    </div>
    </body>
    </html>
    Content in either column will always result in equal columns. You will still need to look at Doug's site to see what browser issues need to be addressed but the above should give an idea of how it works. (only tested this in iE6 and Mozilla1.2)

    Paul

  5. #5
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul i might be wrong on this, but i used this on another page an i ran into a problem when in put a border to seperate the left from main content. The problem was that you will notice if the main content is longer the the left content. Because the border will not stretch all the way to the bottom. And i think i might run into the same exact problem if i had a repeating strip on the left hand side.

    here is the exact problem: link
    Last edited by Fire59; Sep 15, 2003 at 13:04.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes you're correct in Dougs 3 column example, I don't think you can add a border to the columns but
    if you try the code I posted you'll notice that I put a border right on the left content and a border left on the right content therefore ensuring a full length border.

    Paul

  7. #7
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea using your code the border works. Sorry i kinda misquote my problem. If you look at the link that i provided above you'll notice that the black stripe only goes down as far as the content. My goal is to get it to stretch the whole length. Maybe this might require the java solution done by kevin y.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The background image should go in the wrapper element.

    Code:
    .wrapper {
     border-right:300px solid yellow;
     width:100px; 
     background: url("http://www.d.umn.edu/~vuxx0062/images/bstripe.gif") transparent repeat-y left top;
     background-color: #FFFFCC;
    }
    This works in IE6, Mozilla 1.2 and OPera 7, but Moz 1.4 doesn't like it.

    I think theres a solution in there somewhere. If you don't need borders then Doug's solution should be ok. (The javascript version will equalise the columns also.)

    Paul

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It works in mozilla 1.4 if you add clear:both here:
    Code:
       <div class="left"> 
    		<p>Left content goes here : Left content goes here : Left content goes 
    		  here : </p>
    		<p>leftcontent</p>
    		<p>left</p>
    		<p>left</p>
    		<p>left</p>
    		<p>left</p>
    		<p>left</p>
    		<p>left</p>
    	<div style="clear:both;">&nbsp;</div>
    	  </div>
    I think it does what you want.

    Paul

  10. #10
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    paul i should of check your code in mozilla to start. The right content overflow the box. Check the link .

    Here is what i did with paul code. I place the background image under the outter section:
    full preview
    Code:
    .outer {
    	background: url("http://www.d.umn.edu/~vuxx0062/images/bstripe.gif") transparent repeat-y top left; 
    	border-left-width: 150px;  /* left column width */
    	border-left-color: #fff;   /* left column colour */
    	
    	border-right-width: 0; /* right column width */
    	border-right-color: #cfc;  /* right column colour */
    	
    	background-color: maroon; /* center column colour */
    }
    In mozilla you can see it on the left hand side of the content. You cant see it IE.

    Not sure if this is progress.here
    Last edited by Fire59; Sep 15, 2003 at 22:24.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    paul i should of check your code in mozilla to start. The right content overflow the box. Check the
    I noticed this as it was ok in Moz 1.2 but not moz 1.4. I posted a fix in my previous post which solved the problem for both.

    The background image is showing ok in IE6.

    I thought you wanted borders around your columns which was what was making it tricky otherwise you could have just used Doug's code anyway.

    I hope you are nearer to a solution as it seems to work for me ok

    Paul

  12. #12
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul your solution, work for IE and mozilla. But with my original design i was looking to have a fixed size left side(150px) to hold my navigation, and the right column would be fluid and scalable. Doug's script allows this to happen. Is there anything i can do to make what you did to work for doug script. I have the layout here.

    With that script it shows up in moz 1.4 but it's on the right side of the left content.

  13. #13
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that this is what you want:

    Code:
    .inner { background: url("http://www.d.umn.edu/~vuxx0062/images/bstripe.gif") 
    transparent repeat-y top left; }
    .center p { padding-left: 25px; }
    I removed the background you had in before.

    Good to see people getting use out of the layout.

    I'll write up an article building up the layout with one column, two columns then three columns, showing how to get images in etc at the same time. I should have a shorter artice comming up soon on SP, watch out for it

    Douglas

    PS: Paul: thanks for recommending my code, seems like you've answered about as many questions on it as I have!
    Last edited by DougBTX; Sep 16, 2003 at 13:00.
    Hello World

  14. #14
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Doug, but it doesn't show up at all. What i want to do is have that stripe running against the left edge. Hope this makes it a bit clear. At the top you can see my illustration with ascii, the "xxx" represent the stripe.

  15. #15
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, didn't see that. Makes it even easier:

    Code:
    .wrapper {
      width: auto;
      border-left: 15px solid black;
    }
    You'll want to take the .wide div out of .wrapper

    Douglas
    Hello World

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    PS: Paul: thanks for recommending my code, seems like you've answered about as many questions on it as I have!
    It's a great piece of code Doug and you deserve a medal for it You've made me think differently about things now. Instead of accepting that things can't be done I try and see how they could be done.

    Keep up the good work and I look forward to reading your tutorials.

    Paul

  17. #17
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doug getting closer, instead of having it as a border is there a way i can get it in as a background image?

    More on my story: I'm in a student organization, and i'm redoing their site. This is the look of it image

    so from the ascii layout above, i have 2 column. The lleft column top will contain the logo and the round corner. the bottom div will have a strip that continue from the top image.
    Then on the main cotent: At the top i will have that "umd student organization" then a blue stripe in the background repeating-y.

    Main content will be fluid.

    Most of this can be done easily i think, the big thing that i ran into is getting that left stripe to come in.

  18. #18
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that could have been in the first post!

    Code:
    body { background: url("http://www.d.umn.edu/~vuxx0062/images/bstripe.gif") transparent repeat-y top left; }
    .outer { border-left-width: 0;
    	padding-left: 150px;       /* left column width */ }
    And then remove all the background colours too.

    And this line (remove):

    Code:
    .outer > .inner { border-bottom: 1px solid transparent; }
    Should be it finally...

    Paul: great to hear that it's got someone thinking I've yet to see something which can't be solved! (Though I would like to see a cleaner version of a multicolumn layout with % width left and right columns, I think I've got an idea, but not tried it yet...(clean code, touching columns, no column wrapping, footer. Possibly full height columns too, but when you start adding that it gets messy...))

    Douglas
    Hello World

  19. #19
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks doug, and paul. I'll try to give you guys a break, and stop asking questions.

  20. #20
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some more questions for the expert:

    So i got most it it done, i'm trying to create a footer that at the bottom of the page.
    like the one on this image
    Here is my current progress

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks ok to me.

    If you want the footer to stretch all the way across the page then take it out of the wrapper div and place it just before the closing body tag.

    Also take out the div that has a class of leading and put it in the top of the footer tag. Now the footer will stretch all the way across the screen (if that's what you meant?) You will need to redo the leading gif so that it doesn't have a white background (give it a transparent background and then you can lay it across the black line at the side of the page as in your example image).

    You will also need to adjust the margins on the text etc but that's simple enough.

    I wasn't sure what the question was!!

    Paul

  22. #22
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul that was exactly what i was looking to do.

    I made the leading.gif transparent so it should lay over the stripe now. But for some reason it doesn't show up in moz. Plus is there anyway i can get that footer to lie absolutely at the bottom of the page. Like touching the bottom edge?

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try adding a nonbreaking space in the existing clear div.
    Code:
      <div class="clear">&nbsp;</div>
    I don't like using them but it seems to make mozilla display the bg gif.

    To get the footer to lie on the bottom of the window is a bit of a problem and you are probably best leaving it at the end of the content as it is.

    There are a few hacks but they all seem to fail at some point in some browser. You could place the footer absolutely in a container that is 100% high (and holds the whole page) and also set the body to 100% high (html,body{height:100%}). You then place the footer absolutely at the bottom of the container. (The container itself will need to be position relative.) You will then need to set a bottom margin on the container big enough to allow room for the footer.

    While this appears to work in IE6 mozilla just overwrtites the foooter when the screen is resized. You then have to start adding hacks for mozilla and life gets complicated.

    There is a fixed footer javascript about if you're desparate but that keeps the footer at the bootom of the viewport at all times.

    I prefer to let my footers stay at the foot of the content.

    Paul

  24. #24
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea it seems like adding a nbsp fix the problem in moz. From the sound of it getting the footer position is a bit complicated, and i rather not use javascript. Thanks for all the help paul.


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
  •