Testing out CSS/DIV layouts

Moonlilly · #1 (**permalink**) Apr 3rd, 2007, 17:49

Thanks for the encouragement guys:wave: . I found Karine's comment especially helpful about not using positionning and just using floats. I made a simple test layout this morning between running errands (just for fun:w00t2

. Now, can somone tell me why my right column doesn't quite make it to the far right? Also, is there a way to make my 3 columns have no space in between, at all, ever (useful for graphic layout)? Here is the code:

Code: Select all

<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #bac18e;
}
#header {
 width: 100%;
 border: thin solid #0099CC;
}
#leftcol {
 float: left;
 width: 32%;
 border: thin solid #336600;
}
#centercol {
 float: left;
 width: 34%;
 border: thin solid #336600;
}
#rightcol {
 float: right;
 width: 32%;
 border: thin solid #993333;
}
#footer {
 width: 100%;
 border: thin solid #0099CC;
}
-->
</style>
</head>
<body>
<div id="header">
  <div id="header">Header</div>
</div>
<div id="leftcol">
  <div align="center">Left column</div>
</div>
<div id="centercol">
  <div align="center">Center column</div>
</div>
<div id="rightcol">
  <div align="center">Right column</div>
</div>
<div id="footer">
<div id="footer">Footer</div>
</div>
</body>
</html>

Thanks again for all your help!

karinne · #2 (**permalink**) Apr 3rd, 2007, 17:59

First of all, you can only use id's once in a document. And you don't really need

Code: Select all

<div id="header">
  <div id="header">Header</div>
</div>
....
<div id="footer">
<div id="footer">Footer</div>
</div>

anyways ... just

Code: Select all

 <div id="header">Header</div>
....
<div id="footer">Footer</div>

Dealing with % is such PITA! You can never get pixel perfect since you have to take into account padding, margins and borders when defining the width of you div.

Moonlilly · #3 (**permalink**) Apr 3rd, 2007, 18:43

So if I put a fixed width, will my layout still be liquid? Or should I use a max-width? I suppose I'll answer my question myself when I test it out in a minute, but if nothing I try works, you may have another proposition LOL!

karinne · #4 (**permalink**) Apr 3rd, 2007, 18:50

Hmm ... loose the borders than the spacing won't show

Moonlilly · #5 (**permalink**) Apr 3rd, 2007, 18:53

That's fine if I had just text, but what if I wanted to do a layout where each div had a background image that was part of the whole graphical layout? That's why I'm being picky about there being no spaces between each div and having them align just right. So far, no luck with the fixed witdh, but I'll keep plugging at it

karinne · #6 (**permalink**) Apr 3rd, 2007, 18:55

Well ... what kind of background are you going to be using. Because, using a background on a fluid layout is pretty hard to make it work.

Moonlilly · #7 (**permalink**) Apr 3rd, 2007, 18:59

I have no specific background im mind just yet, but I'm trying to make a flexible template for myself that I can use over and over, and know it will work, instead of having to use someone elses

. That's where I find using tables is sooo much easier for layout! So convince me some more (it shouldn't be that hard) LOL!

karinne · #8 (**permalink**) Apr 3rd, 2007, 19:04

Well ... the thing is, if your markup is created properly, all you should need to change is the CSS.

A GREAT example of this is the CSS ZenGarden. Every style uses the same HTML, only the different stylesheets and images are loaded.

Stop trying to make me convince you and just code, play around with it. It's not something that you'll understand today or tomorrow. It takes a while to sink in and to understand every little detail.

Moonlilly · #9 (**permalink**) Apr 3rd, 2007, 20:52

But I wanna know it all now! I wish there was a download button that I could press to download everything there is to know about CSS into my brain with a high-speed connection!! But since that technology is lightyears away, I will resign to learning bit by bit, hopefully getting the hang of it someday! LOL

Thank you so much for your time and help

!

Ryan Fait · #10 (**permalink**) Apr 3rd, 2007, 21:16

I learned by making my own sites. It's also quite helpful to take a site you've designed in CSS and start over. I've remade the code for my site 10 times and not once was the CSS even remotely similar. It's quite an amazing language.

http://w3schools.com/
http://csszengarden.com/
http://css.maxdesign.com.au/

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
opinion on layouts	motormaniac	Website Planning	9	Mar 13th, 2008 04:05
Liquid Layouts and Max-Width	Sporky	Web Page Design	1	Jun 4th, 2007 21:33
questions about column and row div layouts	deesto	Web Page Design	10	Dec 16th, 2006 23:37
what's the point of liquid layouts?	thadley	Web Page Design	15	Mar 16th, 2006 03:24
% or px when defineing DIV layouts	surfthegecko	Web Page Design	10	Dec 13th, 2005 23:18

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Testing out CSS/DIV layouts