Need help with a layout !

Status
Not open for further replies.

DefecTalisman

Community Advocate
Community Support
Messages
4,148
Reaction score
5
Points
38
For the past 3 days I have been boggling myself with CSS. I am trying to achieve a basic 3 column layout with a header and a footer.
What is stumping me (besides the fact that every browser except Mozilla has trouble with CSS) is that I can't get the footer or any div tags after the columns to adjust to the length of the longest column.
It only moves in regard to one column(the one that isn't floating or absolute).

If anyone could help me out with this, without asking me to post the (sad) script's if have tried, I am willing to slide credits to anyone that aids/helps/sorts out my situation.
 

Jober68

Member
Messages
63
Reaction score
0
Points
6
If you want it to be something like

Header
column 1 Column 2 Column 3
Footer


Then I would recommend using a table and using td and tr with colspan for the header and footer. Then you can make classes for your css to make each column/footer/header different if you so desire.

If you need anymore help feel free to PM me
 
Last edited:

curt15

New Member
Messages
96
Reaction score
0
Points
0
DONT USE TABLES WHEN YOU CAN USE CSS!!!

If you need help, I'm more than willing to help. Normally If it doesn't work in Firefox, that you have got it wrong somewhere. If I can see the code, then I can help out. :)
 

bonzo meier

Member
Messages
47
Reaction score
0
Points
6
hm.

have you tried assigning any kind of width to the footer-div?

Code:
 .footer_wrapper {
	margin:auto;
	border:groove;
	padding: 2px;
	background:#990099;
        width: 100%;   /* or 760px or how wide you want the div to be /*
}

anyway, to achieve the layout you intend I´d use css as follows:

Code:
.wrapper {width:760px;}
.header {width: 760px; float: left; clear: right;}
.leftcolumn {width: 200px; float:left; clear: none;}
.middlecolumn {width: 350px; float:left; clear: none;}
.rightcolumn {width: 200px; float:left; clear: right;}
.footer {width: 760px; float: left; clear: left;}

this basically is it. hope you like my suggestion.
peace, bonzo
 

worthynotes

New Member
Messages
5
Reaction score
0
Points
0
I only found one way to get the footer to stay at the bottom of the page with the other columns being the right length. Unfortunately I can't find the site I got the idea from now, but it works on my website. Obviously things can be altered to the way you want them, height of some elements etc. but it's the basic idea. It's a 3 column layout with a header and a footer.

Here's the HTML:
Code:
<html>
<body>
<div id="nonbottom"> // everything that's not in the footer
<div id="header">    
Heading here
</div>            
<div id="left">
Left stuff
</div> 
<div id="right">
Right stuff
</div>
<div id="center">
Center stuff
</div>
</div>              //end of everything not in footer
<div id="bottom">
Footer here
</div>
</body>
</html>

And here's the CSS:
Code:
html {
	height: 100%;
}

body {
	height: 100%;
}

#header {
	margin: 20px;
	padding: 10px;
	height: 16%;
	text-align: center;
}

#left {
	position: absolute;
	left: 15px;
	top: 250px;
	width: 12%;
}

#center {
	margin-top: 30px;
	margin-left: 18%;
	margin-right: 18%;
        margin-bottom: 35px;
}

#right {
	position: absolute;
	right: 20px;
	top: 250px;
	width: 12%;
 }

#bottom {
	text-align: center;
	position: relative;
	margin-top: -8em;
}

#nonbottom {
	position: relative;
	min-height: 80%;
        margin-bottom: 150px;
}

* html #nonbottom {
	min-height: 100%;
        margin-bottom: 150px;
}
 

DefecTalisman

Community Advocate
Community Support
Messages
4,148
Reaction score
5
Points
38
worthynotes : that code only adjusts the footer to the center div. If there is a whole load of text in the side div's they just overlap the footer.

bonzo meier : Thank you very much, that is exactly what I was looking for. Simple but works well.
 
Status
Not open for further replies.
Top