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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts

    3 column layout question

    Starting on a design for someone...it's based off of a picture, and I'm *thinking* a 3 column layout (fixed width center, fluid width sides) should do it...but I'm open to suggestions.

    Anyway, what is causing the gap between my center & right columns?

    html: http://claryfuneralhome.com/alumni/index.html
    css: http://claryfuneralhome.com/alumni/alumni.css

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    your right column is set to Float:Right;

    you'll need to change it to "float:left;" if you want to get rid of the gap

  • Users who have thanked dylanbaumannn for this post:

    chevy_ls_6 (02-10-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Hmmm...seems to have shoved the excess to the right? I've done a faux columns layout before, but was hoping to avoid it this time, but I may have to revisit it...!

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Well basically what's happening is your webpage is working correctly, it's just not centered on the page.

    if you want to do that just add a container around the outside of your columns and center the container

    HTML
    Code:
    <div id="container">
       <div id="leftcolumn"></div>
       <div id="middlecolumn"></div>
       <div id="rightcolumn"></div>
    </div>

  • Users who have thanked dylanbaumannn for this post:

    chevy_ls_6 (02-16-2012)

  • #5
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    [EDIT: nm, I got it, lol!]

    Ok, I couldn't get the other to work, so I did a bit of reading and started over...I'm close, but why can't get the image in #left-side to move over to the right? I tried to float an img #left-side, positioning, and couldn't get it to budge. What am I missing?

    [btw, don't laugh at the crappy graphics, I'm not very good, and I'm just trying to get everything roughed in for now!]

    test url: http://claryfuneralhome.com/alumni/index.html

    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>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>Alton R-IV Alumni Association</title>
    <style type="text/css">
    body {
    	min-width: 1200px;
    	margin:0;
    	padding:0;
    	background-position: top center;
    	background-color: #5DAA35;
    }
    
    #left-side-outer {
    	width:50%;
    	float:left;
    	margin-right:-400px;
    	height: 800px;
    }
    #left-side{
    	margin-right:400px;
    	height: 800px;
    		background-color: #5DAA35;
    	background-image: url(images/sky_side.jpg);
    	background-repeat:repeat-x;
    }
     
    #center-column {
    	width:800px;
    	float:left;
    	color: #FFFFFF;
    	background-color: #5DAA35;
    	position:relative;
    	z-index:10;
    	min-height: 800px;
    }
    #right-side-outer {
    	width:50%;
    	float:right;
    	margin-left:-401px;
    	height: 800px;
    }
    #right-side {
    	margin-left:400px;
    	height: 800px;
    	background-color: #5DAA35;
    	background-image: url(images/sky_side.jpg);
    	background-repeat:repeat-x;
    }
    #header{
    	clear:both;
    	height: 175px;
    	text-align: center;
    	background-color: #CC0000;
    }
    
    #menu {
    background: gray;
    line-height: 48px;
    }
    
    #content {
    background-color: white;
    color: black;
    margin-top: 48px;
    margin-bottom: 48px;
    border: 1px solid #000000;
    padding: 4px;
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #ffffff;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#DBD6D6));
    background: -webkit-linear-gradient(#ffffff, #DBD6D6);
    background: -moz-linear-gradient(#ffffff, #DBD6D6);
    background: -ms-linear-gradient(#ffffff, #DBD6D6);
    background: -o-linear-gradient(#ffffff, #DBD6D6);
    background: linear-gradient(#ffffff, #DBD6D6);
    -pie-background: linear-gradient(#ffffff, #DBD6D6);
    behavior: url(/PIE.htc);
    }
    
    </style>
    </head>
    <body>
    <div id="left-side-outer">
    <div id="left-side"><img src="images/sky_sideleft.jpg" />
    </div>
    </div>
    <div id="center-column"><img src="images/sign.jpg" /><div id="content"><div id="menu">Menu Goes Here</div>Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed w>idth centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered
    fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed width centre content :</div ></div>
    <div id="right-side-outer">
    <div id="right-side"><img src="images/sky_sideright.jpg" />
    </div>
    </div>
    </body>
    </html>
    Last edited by chevy_ls_6; 02-12-2012 at 11:52 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello chevy_ls_6,
    I think sometimes it's necessary to split an image like your header into a center and two sides but maybe not in your case where the center is a fixed width.
    Have a look at this ... http://nopeople.com/chevy_ls_6/
    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

  • Users who have thanked Excavator for this post:

    chevy_ls_6 (02-13-2012)

  • #7
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Excavator View Post
    Hello chevy_ls_6,
    I think sometimes it's necessary to split an image like your header into a center and two sides but maybe not in your case where the center is a fixed width.
    Have a look at this ... http://nopeople.com/chevy_ls_6/
    Boy, nothing like me over complicating things, lol! The sad part is I had used the suggested technique on another page I'd done, but evidently I forgot it!

    Thanks, as usual!

  • #8
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    I'm sure this is probably something simple I'm overlooking as well, but why is it that if I resize my browser window I get a gap in grass image in my footer on the far right? (just as a test I threw a cow on there and it does the same with is as well, lol)

    url: http://www.claryfuneralhome.com/alumni/

  • #9
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by chevy_ls_6 View Post
    why is it that if I resize my browser window I get a gap in grass image in my footer on the far right?

    Could you post a picture of it? I'm not seeing any gaps when I test it on Safari, FF or Chrome

  • #10
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Here you go...and when I said "resize" I meant minimize or whatever, the double squares that makes the browser window smaller. But that may just be the nature of the beast...?
    Attached Thumbnails Attached Thumbnails 3 column layout question-gap.jpg  
    Last edited by chevy_ls_6; 02-16-2012 at 10:38 PM.

  • #11
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Oh yes... Once you get to a certain width and the horizontal scrollbar appears that is when it will happen.

    You have your bottom image set to a width of 100% with a repeating background, and when you get to that small of a resolution (say 900 px) the width of your image is going to be 900px. So when you scroll to the side to reveal the rest of the website (the extra X amount) your webpage is no longer just 900px wide, it's now 1100px wide, however your image at the bottom won't detect that it's technically supposed to be wider since it's set to 100% of the width of your browser, not of the content.

  • Users who have thanked dylanbaumannn for this post:

    chevy_ls_6 (02-22-2012)

  • #12
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    I want to thank everyone for the help, once again...but, I wasn't digging the look/feel of the other layout, so I went a different direction:

    http://www.claryfuneralhome.com/alumni/

    The background image still needs some work, but it seems a lot more fitting for the project. Now, if I could just get the svg filter to work with Firefox on the target server (link)...uggh!

  • #13
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    No problem!

    (i enjoy the new website a lot more btw)

  • Users who have thanked dylanbaumannn for this post:

    chevy_ls_6 (02-22-2012)


  •  

    Posting Permissions

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