...

View Full Version : 3 column layout question



chevy_ls_6
02-10-2012, 09:33 PM
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

dylanbaumannn
02-10-2012, 09:42 PM
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 :)

chevy_ls_6
02-10-2012, 10:01 PM
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...!

dylanbaumannn
02-10-2012, 10:06 PM
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


<div id="container">
<div id="leftcolumn"></div>
<div id="middlecolumn"></div>
<div id="rightcolumn"></div>
</div>

chevy_ls_6
02-13-2012, 12:32 AM
[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


<!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>

Excavator
02-13-2012, 01:19 AM
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/

chevy_ls_6
02-13-2012, 04:26 PM
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! :thumbsup:

chevy_ls_6
02-16-2012, 11:09 PM
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/

dylanbaumannn
02-16-2012, 11:31 PM
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

chevy_ls_6
02-16-2012, 11:35 PM
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...?

dylanbaumannn
02-16-2012, 11:57 PM
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.

chevy_ls_6
02-22-2012, 05:57 PM
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 (http://alton.k12.mo.us/alumni/index.html))...uggh!

dylanbaumannn
02-22-2012, 07:38 PM
No problem!

(i enjoy the new website a lot more btw)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum