11 replies [Last post]
DillonR
DillonR's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-12-03
Posts: 5
Points: 6

I'm working on a site for a college project..3 column layout..easy enough, right? A few aligns and I'm done. Nope. I asked people who's worked to look at mine, and they couldn't figure it out. I keep trying things but nothing works.

CSS:

@charset "utf-8";
/* CSS Document */
 
body
{
background-color: #b29360;
}
 
#wrapper
{
height: 100%;
margin-right: auto;
margin-left: auto;
width: 912px;	
background-color: #e8eed9;
}
 
#banner
{
margin-left: auto;
margin-right: auto;
 
background-color:#799141;
width: 912px;	
height: 100 px;
}
 
#navigation
{
padding:0px;
align:left;
margin-left: auto;
margin-right: auto;
background-color:#94ae56;
width: 912px;	
height: 50px;
}
							// Side Columns
#left
{
float: left;
width: 160px;
background-color:red;
color: blue;
}
 
 
 
 
 
#right
{
position-top:150px;
float: right;
width: 160px;
background-color:red;
color: blue;
}
 
							// Main Column
#middle
{
float:left;
width: 592px;	
background-color:#0C0;
color:#360;
 
}
							// End Main Column
 
 
 
#footer
{
width: 912px;
margin: 0 auto;	
background-color:white;
}
 
 
							// End Side Columns
 
 
 

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=utf-8" />
<link rel=StyleSheet href="assets/style.css" type="text/css">
<title>HOME</title>
</head>
<body>
 
<!--Outside of the Wrapper -->
 
 
<div id="banner">							<!--Begin Banner --->
<img src="images/Banner.bmp" />					
</div>										<!--End Banner--->
 
<div id="navigation">						<!--Begin Navigation --->
<img src="images/ButtonTemp.bmp"/>	
<img src="images/ButtonTemp.bmp"/>	
<img src="images/ButtonTemp.bmp"/>	
<img src="images/ButtonTemp.bmp"/>	
<img src="images/ButtonTemp.bmp"/>
<img src="images/ButtonTemp.bmp"/>
</div>										<!--End Navigation--->
 
 
 
 
 
<div id="wrapper">							<!--Begin Wrapper--->
 
 
 
 
 
 
<div id="left">								<!--Begin Left Column --->	
LEFT LEFT
</div>										<!--End Left Column--->
 
 
<div id="middle">							<!--Begin Content Column--->
MIDDLE CONTENT MIDDLE CONTENT
</div>										<!--End Content Column--->
 
 
 
 
<div id="right">							<!--Begin Right Column --->
RIGHT RIGHT
</div>										<!--End Right Column--->
 
 
 
 
<div id="footer">							<!--Begin Footer --->
THIS IS THE FOOTER, THIS IS THE FOOTER
</div>										<!--End Footer--->
 
</div>										<!--End Wrapper--->
 
 
 
 
 
</body>
</html>

The header and connected banner work fine. They're outside the wrapper container. The wrapper only contains the 3 columns, for now.

The layout is supposed to be, all of the same heights, a 160px sidebar, then a 592px main content column, then another thin 160px bar to the right.

However, NONE of the divs backgrounds display properly, and it's taking their text and putting it in the center...even making their text colors black, not what I specify.

I'm pretty used to CSS breaking things for fun, but I've never seen it ignore such a simple concept. Please, what am I doing wrong here? I'm very confused.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Well. You're making stuff up

Well. You're making stuff up and you can't make stuff up in CSS.
No such thing as 'align' or 'position-top'.
Validate your HTML and CSS using the W3C validators.
There are easy to follow tutorials at htmldog.com for beginners.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

DillonR
DillonR's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-12-03
Posts: 5
Points: 6

No thanks, those were typos.

No thanks, those were typos. I meant Float. and CSS is still deciding that float means nothing...it still displays the same.

DillonR
DillonR's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-12-03
Posts: 5
Points: 6

After messing with it more,

After messing with it more, it looks like this: http://yfrog.com/75brokensitep

Neat, CSS. Real neat.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 28 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

So do you still have a

So do you still have a question???? Quest

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

DillonR wrote: No thanks,

DillonR wrote:

No thanks, those were typos.

Then please post your valid CSS and HTML.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

DillonR
DillonR's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-12-03
Posts: 5
Points: 6

@charset "utf-8"; /* CSS

@charset "utf-8";
/* CSS Document */
 
body
{
background-color: #b29360;
}
 
#wrapper
{
height: 100%;
margin-right: auto;
margin-left: auto;
width: 912px;	
background-color: #e8eed9;
}
 
#banner
{
height: 100 px;
width: 912px;	
margin-left: auto;
margin-right: auto;
 
background-color:#799141;
 
 
}
 
#navigation
{
 
margin-left:auto;
margin-right:auto;
background-color:#94ae56;
width: 912px;	
height: 50px;
margin-bottom:0px;
}
 
#left
{
float: left;
width: 160px;
background-color:red;
color: blue;
 
}
 
 
 
 
 
#right
{
 
float: right;
width: 160px;
background-color:red;
color: blue;
 
}
 
 
#middle
{
 
min-width: 592px;	
max-width: 592px;
background-color:#0C0;
color:#360;
}
 
 
 
 
#footer
{
width: 912px;
margin: 0 auto;	
background-color:white;
}
 
 
 
 
 
 

and then, 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=utf-8" />
<link rel=StyleSheet href="assets/style.css" type="text/css"/>
<title>HOME</title>
</head>
<body>
 
<!--Outside of the Wrapper -->
 
 
<div id="banner">							<!--Begin Banner -->
<img src="images/Banner.bmp" alt="banner" />					
</div>										<!--End Banner-->
 
<div id="navigation">						<!--Begin Navigation -->
<img src="images/ButtonTemp.bmp" alt="button"/><img src="images/ButtonTemp.bmp" alt="button"/><img src="images/ButtonTemp.bmp" alt="button"/><img src="images/ButtonTemp.bmp" alt="button"/><img src="images/ButtonTemp.bmp" alt="button"/><img src="images/ButtonTemp.bmp" alt="button"/>
</div>										<!--End Navigation-->
 
 
 
 
 
<div id="wrapper">							<!--Begin Wrapper-->
 
 
 
 
 
 
<div id="left">								<!--Begin Left Column -->	
LEFT LEFT
</div>										<!--End Left Column-->
 
 
<div id="middle">							<!--Begin Content Column-->
MIDDLE CONTENT MIDDLE CONTENT
</div>										<!--End Content Column-->
 
 
 
 
<div id="right">							<!--Begin Right Column -->
RIGHT RIGHT
</div>										<!--End Right Column-->
 
 
 
 
 
</div>										<!--End Wrapper-->
 
 
 
<div id="footer">							<!--Begin Footer -->
THIS IS THE FOOTER, THIS IS THE FOOTER
</div>										<!--End Footer-->
 
 
 
<!--a: order ===== Link, Visited, Hover, Active -->
 
 
</body>
</html>

I told the middle DIV to be it's right width, but it's smaller. When I set both a min-width and max-width to the width I want it, it still shrinks or grows randomly. Kind of odd.

Coupled with the above picture I posted, I need to know why it's placing my right column div as such

Thanks

Janna
Janna's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-6
Joined: 2010-12-03
Posts: 3
Points: 3

Right Column Div below other column divs

You have a float on your left column then no float on the middle column so that middle column is going to take its cue from that first column float and position itself up to the right of that first column.

Your right column is floated right in the code and in the display, however, because the middle column has no float, the right column will float right and relative to that middle column, thus it's below.

Finally, you might want to clear the float in your footer to make sure it doesn't want to wrap up next the columns using clear:both; in the footer stylecode.

My favorite way to do 3 columns is to set a width on your wrapper and then float all 3 columns left using percentage widths. For 3 equal width columns, float:left; width:33%; on each div.

Also for best usability/accessibility, use a percentage width on your wrapper div too.

FYI: I see that you realized that you can use /* some commment text here */ in CSS but you can't use the // method. That was the problem originally with your CSS where the columns just didn't work at all.

#left
{
float: left;
width: 33%;
background-color:red;
color: blue;
}

#right
{
float: left;
width: 33%;
background-color:red;
color: blue;
}

#middle
{
float:left;
width: 33%;
background-color:#0C0;
color:#360;
}

#footer
{
clear:both;
margin: 0 auto;
background-color:white;
}

DillonR
DillonR's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-12-03
Posts: 5
Points: 6

thanks for the response -

thanks for the response - yeah it took me a few more minutes to realize the comment style made no sense

But ultimately I fixed it through position trickery...followed by another drought of not-working...followed by realizing I didn't compensate the 3 widths with their respective paddings....and I'm happy to say it all works perfectly now.

But I really like your 33% float left idea, I'll definately use that next time

thanks Laughing out loud

MyLove
MyLove's picture
Offline
newbie
Last seen: 9 years 48 weeks ago
Timezone: GMT+8
Joined: 2010-12-18
Posts: 1
Points: 1

Thanks For the answer

Thanks For the answer-More answer for the link removed - Hugo

Though not very full, but I think it's not possible.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 week 4 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2043
Points: 2268

Spam spam spam spam ...

Spam spam spam spam ... Where's my viking suit?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

V now to be known simply as

V now to be known simply as 'The Viking' wrote:

Where's my viking suit?

Probably stuck up your fiord Tongue

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me