SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)

    Need help with two column layout with sticky footer

    This is an example of a two-column layout with a sticky footer on Paul O'Brien's site:
    http://www.pmob.co.uk/temp/2colfixedtest_4.htm

    Currently the two columns on the page (div#left and div#centre-content) take up 100% of the available width.
    Would it be possible to wrap these columns in a containing div, give this new div a width of, for example, 960px and center it?

    I've been trying to do this all afternoon, but everything I tried just broke the layout.
    Grateful for any help.

    By way of illustration I have attached two images.

    Current:

    current.png

    Desired:

    desired.png

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Basically you will need to wrap #left , #centrecontent, and #clearfooter in a div and give that div a class ( i am calling it .center)

    edit the the CSS accordingly:

    Code:
    #outer > .center {  background:orange;}
    #outer > .center:before { content:""; position: absolute; left: -160px; right: 100%; border-left: 1px solid black;   border-right: 2px groove ; top:0; bottom:0; /*makes the boders*/}
    
    #outer {
    	min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    	color: #000000;
    	border-left:160px solid pink;
    	border-right:1px solid #000;
    	margin:0 auto; 
    	width:800px;   
    	background: orange;
    	position: relative;
    }
    That's it. hope that helps.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Oh wow. That's really great!! Thanks ever so much!

    A second question:
    Do you know how I would go about changing the column widths?
    I would ideally like the left column to be 640px wide and the right column to be 320px.
    I initially thought this would be simple, but my first attempts have produced quite rather bizarre results.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No, hang on, I got it! It's all good.
    Thanks again for your help, if there was an up-vote button, I'd hit it!


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
  •