1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Newbie CSS Layout Problem

Discussion in 'CSS' started by PHPGator, Oct 19, 2007.

0
  1. #1
    Alright, i've been contemplating learning for a while, so here I am. I've been using tables for so long this css layout stuff is above my head. I'm having trouble getting my small ugly 3rd column layout working. Can someone please tell me what i'm doing wrong?

    The right column is not aligning properly.

    Please ignore the fact that i'm not using an external style sheet and other asthetic issues for now. Please leave your response to what is causing this problem for now. :)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>
<title>This is a 3 Column Layout</title>

<style type="text/css">
body {
	background-color: #CCCCCC;
	color: #000000;
	font-weight: normal;
	font-family: Arial;
	font-size: 11px;
	margin: 10px 10px 0px 10px;
}
#banner {
	background:#fff;
	height:40px;
	width: 700px;
	margin: auto;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-left:1px solid #000;
}
#banner_text {
	margin: 10px 10px 10px 10px;
	font-weight: bold;
	font-family: Arial;
	font-size: 20px;
}
#main_body {
	margin: auto;
	width: 700px;
	border: 1px solid #000000;
	background-color: yellow;
}
#left_menu {
	width: 150px;
	padding: 7px;
	background-color: blue;
	float: left;
}
#center {
	width: 400px;
	padding: 7px;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background-color: red;
}
#right_menu {
	width: 150px;
	padding: 7px;
	background-color: green;
	float: right;
}

</style>
</head>
<body>

<div id="banner">
	<div id="banner_text">
	Look, it's a banner!
	</div>
</div>
<div id="main_body">
	<div id="left_menu">
		Left Menu
	</div>
	<div id="center">
		Center
	</div>
	<div id="right_menu">
		Right Menu
	</div>
</div>

</body>
</html>
    Code (markup):
     
    PHPGator, Oct 19, 2007 IP
  2. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I am a noob too but I think I see your problem.

    #center {
    width: 400px;
    padding: 7px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background-color: red;
    float: left;
    }

    Remove the float right on the following

    #right_menu {
    width: 150px;
    padding: 7px;
    background-color: green;
    }

    Hope it works!
     
    gobbly2100, Oct 19, 2007 IP
    PHPGator likes this.
  3. PHPGator

    PHPGator Banned

    Messages:
    4,437
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    260
    #3
    Unfortunately it did not solve the problem. The right menu is showing up below the left menu. Was I supposed to have float: left; in both the center and left column's?

    This may help, i'm using IE7, which appears to be giving the right menu most of the fits. :) Rep given for the attempt.
     
    PHPGator, Oct 19, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Are you looking for something like this?

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>PHPGator's 3 Column Layout</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief description of what the current page is about goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
</head>
<body>
<div id="header">
	<!-- I like to use an image for the logo instead of a H1 element -->
	<img src="#" width="200" height="80" alt="alternate text" title="" />
</div>
<ul id="menu">
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
</ul>
<div id="content">
	<div class="wrapper">
		<h1>Web Page Title</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
			sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
			Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
			ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
			ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
			elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
			hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
			nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
			lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
			libero, id consequat quam lorem vitae orci.
		</p>
		<h2>Section Heading</h2>
		<p>
			Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus.
			Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec
			scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non
			auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin
			nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis
			libero.
		</p>
		<p>
			Vestibulum et massa. Cras pharetra metus ut quam. Fusce ac lectus. Nunc quis nibh ut
			tellus placerat mattis. Duis mi dolor, pharetra at, consectetuer in, aliquet eget,
			lacus. Ut malesuada mi sed ipsum. Integer tristique libero et lacus. Duis hendrerit,
			lectus sit amet porta rhoncus, ipsum quam placerat nunc, ac porta quam turpis ut erat.
			Vestibulum molestie, metus sit amet malesuada eleifend, lorem est dignissim nibh, a
			imperdiet turpis mauris a tortor. Nam porttitor lacus sed tellus. Phasellus tempus. In
			hac habitasse platea dictumst. Vivamus magna. In in sem. Morbi tristique metus at magna.
			Sed luctus laoreet turpis. Curabitur egestas varius nibh. Fusce condimentum pretium
			augue. Nam sollicitudin rutrum turpis. Quisque imperdiet.
		</p>
		<h2>Section Heading</h2>
		<p>
			Integer turpis arcu, hendrerit id, lacinia non, volutpat quis, quam. Nunc pharetra.
			Vestibulum posuere lorem vitae odio. Donec risus mi, accumsan sed, mattis ut, gravida
			vehicula, massa. Duis auctor dui eu tellus. Nam hendrerit pulvinar est. Aenean nunc. In
			consectetuer. Duis rutrum sollicitudin tellus. Donec rutrum mollis eros. Aliquam eget
			odio vel pede rutrum dictum.
		</p>
		<p>
			Suspendisse potenti. In elit. Nunc nibh. Proin ac enim. Nulla tellus. Nunc ipsum mi,
			ornare dictum, hendrerit lobortis, pellentesque sit amet, magna. Sed dui nisi, dictum
			ac, auctor eu, tincidunt nec, nunc. Donec mattis, nisi non posuere accumsan, nulla sem
			congue elit, sit amet eleifend velit lacus sed dui. Duis urna est, iaculis non,
			malesuada ut, faucibus sit amet, dui. Nunc elementum, augue sed auctor imperdiet, risus
			nibh nonummy erat, in rutrum mi felis eu augue. Phasellus eros. Phasellus scelerisque
			pede id nisl. Sed ornare, ante ac laoreet blandit, sem lacus feugiat diam, eget
			consectetuer lorem massa in massa. Fusce commodo lectus vitae quam.
		</p>
	</div>
</div>
<div id="sidebar">
	<p>
		Some sidebar content goes here.  Keep it simple, yet appropriate.  Don’t go
		on an ego trip.
	</p>
	<p>
		Some sidebar content goes here.  Keep it simple, yet appropriate.  Don’t go
		on an ego trip.
	</p>
	<p>
		Some sidebar content goes here.  Keep it simple, yet appropriate.  Don’t go
		on an ego trip.
	</p>
</div>
<div id="footer">
	<em>Copyright 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
</div>
</body>
</html>
    Code (markup):
    And the accompanying CSS?

    
* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFF;
	color: #000;
	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, garamond, "times new roman", times, serif;
	font-weight: bold;
}

h1 {
	font-family: garamond, "times new roman", times, serif;
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;																/* this squashes a Firefox bug */
	display: block;
}

#header {
	background: #CFC;
	color: inherit;
}

#menu {
	background: #FCF;
	color: inherit;
	float: left;
	list-style: none;
	padding: 10px 0;
	width: 150px;
}
	#menu li {
		padding: 0 10px;
		text-align: center;
	}

#content {
	float: left;
	margin: 0 -150px;
	width: 100%;
}
	#content .wrapper {
		background: #CCF;
		color: inherit;
		margin: 0 150px;
		padding: 10px;
	}

#sidebar {
	background: #FC6;
	color: inherit;
	float: right;
	padding: 10px 0;
	width: 150px;
}
	#sidebar p {
		padding: 0 10px;
	}

#footer {
	background: #CCC;
	clear: both;
	color: inherit;
	height: 1%;
	text-align: center;
}
    Code (markup):
    Note that you can "fix" the width of the page and center it just by applying margin: 0 auto; and width: 700px; to the body selector in the stylesheet (no hacking or other modififcations required).
     
    Dan Schulz, Oct 20, 2007 IP
  5. PHPGator

    PHPGator Banned

    Messages:
    4,437
    Likes Received:
    133
    Best Answers:
    0
    Trophy Points:
    260
    #5
    Dan, that looks correct. I have a question though, I was looking at the code and noticed you have the left and middle portions floated left. The right one is floated right. I added this to my code but for some reason I couldn't use 150, 150, and 400 pixel wide menu's. I had to lower the 150 ones down to 128 a piece.

    I don't understand, why can a 150 + 150 + 400 = 700 not fit in a 700px wide website? I thought it was the borders I had set, but even then, i'm not using 44 pixels worth of border. :D

    Below is the code.

    Could it be the padding?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>
<title>This is a 3 Column Layout</title>

<style type="text/css">
body {
	background-color: #CCCCCC;
	width: 700px;
	color: #000000;
	font-weight: normal;
	font-family: Arial;
	font-size: 11px;
	margin: 0 auto;
}
#banner {
	background:#fff;
	height:40px;
	width: 700px;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-left:1px solid #000;
}
#banner_text {
	margin: 10px 10px 10px 10px;
	font-weight: bold;
	font-family: Arial;
	font-size: 20px;
}
#main_body {
	margin: auto;
	width: 700px;
	border: 1px solid #000000;
	background-color: yellow;
}
#left_menu {
	width: 128px;
	padding: 7px;
	background-color: blue;
	float: left;
}
#center {
	width: 400px;
	padding: 7px;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background-color: red;
	float: left;
}
#right_menu {
	width: 128px;
	padding: 7px;
	background-color: green;
	float: right;
}

</style>
</head>
<body>

<div id="banner">
	<div id="banner_text">
	Look, it's a banner!
	</div>
</div>
<div id="main_body">
	<div id="left_menu">
		Left Menu
	</div>
	<div id="center">
		Center
	</div>
	<div id="right_menu">
		Right Menu
	</div>
</div>

</body>
</html>
    Code (markup):
     
    PHPGator, Oct 23, 2007 IP
  6. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    In Firefox, padding adds to the width of the element whereas in IE it does not. So firefox sees 150 + 7 +7=164 whereas IE 5 and 6 in quirks mode sees it as 150
     
    Arnold9000, Oct 23, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Arnold, What you said about IE is true only when it's in quirks mode. In standards mode, IE will treat padding and margins properly. Of course why someone would willingly WANT to work in quirks mode is beyond me... back to our regularly scheduled programming though (and yes, I was agreeing with you; I just wanted to reinforce and clarify what you were talking about).

    PHPGator, I didn't set an explicit width on the content - you'll also notice I didn't wrap the three columns in a DIV that was separated from the header and footer since there's no need to do that.

    You'll also notice that I zero'd out all the margins and padding on EVERYTHING via the universal selector, then added them where I needed to, as well as setting a default leading (line-height in CSS parlance) to go with my font sizes. I don't like leaving anything to chance with browsers, since each one thinks it knows best (and when it comes to line-heights, margins and padding, they rarely if ever do).
     
    Dan Schulz, Oct 23, 2007 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    I'd also add in that part of the problem as I see it is an excess of containers for nothing... you've got a fixed width site, so wrap EVERYTHING in that fixed width so you can declare less containers and less CSS.

    This is probably how I'd code your example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>
<title>This is a 3 Column Layout</title>

<style type="text/css">
* {
	margin:0;
	padding;0;
}

body {
	padding:10px;
	color:#000;
	background:#CCC;
	font:normal 85%/140% arial,helvetica,sans-serif;
	text-align:center;
}

#container {
	width:700px;
	margin:0 auto;
	text-align:left;
	overflow:hidden;
	border:1px solid #000;
}

h1 {
	height:40px;
	background:#fff;
	border-bottom:1px solid #000;
	padding:0 8px;
	font:bold 20px/40px arial,helvetica,sans-serif;
}

#left_menu {
	width:134px;
	padding:8px;
	background:blue;
	float:left;
}

#center {
	float:left;
	width:382px;
	padding:8px;
	border:solid #000;
	border-width:0 1px;
	background:red;
}

#right_menu {
	width:134px;
	padding:8px;
	background:green;
	float:left;
}

</style>

</head><body>

<div id="container">
	<h1>Look, it's a banner!</h1>
	<div id="left_menu">
		Left Menu
	</div>
	<div id="center">
		Center
	</div>
	<div id="right_menu">
		Right Menu
	</div>
</div>

</body></html>
    Code (markup):
    only real 'issue' would be that IE 5.x makes the columns too narrow - oh noes. Like anyone cares about IE 5.x anymore. (even so I included the code to center the whole thing there)
     
    deathshadow, Oct 23, 2007 IP
  9. anions

    anions Notable Member

    Messages:
    4,840
    Likes Received:
    179
    Best Answers:
    0
    Trophy Points:
    275
    #9
    Thats very good, but how do I get the navigation bar #left_menu as long as the #center?

    When I add data to the center content div, the sidebars remain intact and it looks very odd...
     
    anions, Oct 26, 2007 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    TECHNICALLY in a CSS/DIV layout... you don't. One of the biggest shortcomings of not using a table is you cannot make columns default to all be an equal height without so many tricks and hacks it ends up being more wasted code than a table EVER would be.

    Thankfully, there's a simple solution - 'Faux columns'.

    You put a background image on #container set to repeat-y. As it tiles down the page it sets the color BEHIND the columns... Not always a perfect solution, but it works for most pages.

    If you want borders around all sides, I'd set a border top, set the sides in the background-image, then set a border top either as a second set of div's, or using a image at the top of a footer (which should be set to clear:both)
     
    deathshadow, Oct 26, 2007 IP
    anions likes this.
  11. anions

    anions Notable Member

    Messages:
    4,840
    Likes Received:
    179
    Best Answers:
    0
    Trophy Points:
    275
    #11
    Wow, that was just perfect, thanks so much.

    Now that you mention it, i remember reading about faux colums and am gonna implement them on a minisite right now.

    I think that I'm still not too good with CSS yet, but problems like these make me realize that I should stop reading and start tying.

    Have some rep, and thanks again :D


    Edit:
    Did it and it worked perfectly, but I lost the background image (background: fixed bottom center no-repeat).
    Well... guess I cant have both together, so I'm sticking with the background image
     
    anions, Oct 27, 2007 IP