PDA

View Full Version : Help With CSS Fluid Layouts


Vexir
November 8th, 2006, 09:02 PM
Could anyone assist me in making this layout fluid:

http://www.vexiron.com/layout2.jpg

I have never done a layout using div's before, Nokrev said to use faux columns and all that but I didn't understand and he neglected to explain properly. If anyone could help me out that would be cool.

Basically all that needs to be done is make the 3 columns in that layout expand vertically (fluidity) and I know how to do it with tables, but not with CSS.
Pasquale
November 8th, 2006, 09:49 PM
You could always cheat, and use a premade 3 column setup and work from there?
Vexir
November 8th, 2006, 09:50 PM
No screw it, I simplified my layout so it'd be easier in CSS, but I'm going back to tables.
iLikePie
November 9th, 2006, 02:12 AM
fyi, the whole fake column thing involves making the columns all part of the same image... so the image will keep continuing to reach to the bottom, and all 3 columns will keep going because they are the same image.

otherwise the left column would end once there was no more content to include, same for the right. And it'd look funny.
.soulty
November 9th, 2006, 08:59 AM
pretty simple to use css with that layout, you just have to set up some divs and slice your graphics up to use the fake column deal.

Pretty much a container div, header div, content div and footer div. in your content div use the sliced graphic as a background image with a repeat-y value, then set up 3 column divs with padding in your content div to lock in the text in those fake columns. Throw in some clears and yeah simple. lol
simplistik
November 9th, 2006, 09:36 AM
well using faux colums though wouldn't allow you to make the layout fluid either. The whole premise of a fluid layout is that it's based off percentages of the screen width... and well... images don't resize.
fasterthanlight™
November 9th, 2006, 10:48 AM
YEa you can only repeat them,

which would be hard to do for this with faux columns, because like simp said,
you have a 1px tall image that is your container background as well as it has the backgrounds for the columns in it, and that image would be fixed in width, as, well, its an image.

If you want your design to be able to expand and contract you're going to have to give each column its own background image or colour so that they can expand and contract as needed individually
.soulty
November 9th, 2006, 06:01 PM
^ i agree and guilty of missing the word fluid completely, lol.
Vexir
November 9th, 2006, 06:41 PM
Yeah, I think I'll go back to tables. Thanks guys.
fasterthanlight™
November 9th, 2006, 07:01 PM
*shudder* Don't give up! there are tonnnnnnns of resources out there that can help you get this done properly without tables, and as well, we are all here ready and willing.

Don't just resort to tables because they're "easier" in the end your going to want to tear yourself a new ******* for not doing it with CSS from the beginning!!
Vexir
November 9th, 2006, 09:56 PM
I have a deadline on this project, I can't just experiment randomly. I don't know, mabye Nokrev sucks at explaining, he was going on about using faux columns. If anyone could jump on AIM, MSN, or Yahoo! Messenger and walk me through it I'd really appreciate it. All I need is to know how to do it once and then I'm good.
Jeff Wheeler
November 9th, 2006, 09:57 PM
I don't know, mabye Nokrev sucks at explaining, he was going on about using faux columns.

Aye! I do… which begs the question, why do so many people ask me? When I suck at explaining it, they assume it's just really hard, and use tables. :P
Vexir
November 9th, 2006, 10:00 PM
Because we assume you are the local web standards geek on the block... ^_^

Edit: I redid the layout, the one above is too tame I guess. Original post updated.
simplistik
November 9th, 2006, 11:06 PM
here's a pretty little shell for you...

is it really xhtml strict? i dunno i didn't validate it, that's just my default settings...

does it work in ie?, i dunno i didn't try,

why is it using css in the actually <head>? because i'm to lazy to create a css file

is it ugly yes?... yes it is... it's very ugly :D


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
html, body { margin: 0; padding: 0; }
body { background: #2f4521; }

#container, #nav, #banner, #dunnowhatthisis, #content { width: 720px; }
#container { margin: 0 auto; }
#nav { height: 50px; list-style: none; margin: 0; padding: 0; background: #0099ff; margin: 0 auto; }
#nav li { margin: 0 10px; padding: 0; float: left; text-align: center; }
#nav li a { width: 100px; height: 50px; background: #000000; display: block; }
#banner { height: 200px; margin: 3px 0 0 0; background: #ff0000; }
#dunnowhatthisis { height: 32px; margin: 3px 0; background: #bad94d; }
#contentLeft { width: 135px; float: left; }
.somethingintheleft { margin: 0 0 10px 0; color: #FFFFFF; background: #000000; float: left; }
#contentMiddle { width: 430px; margin: 0 0 0 10px; background: #2a3d21; float: left; }
#contentRight { width: 135px; float: right; }
.somethingintheright { margin: 0 0 10px 0; color: #FFFFFF; background: #000000; float: right; }

.clear { height: 1%; padding: 0; margin: 0; clear: both; }
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div id="banner"></div>
<div id="dunnowhatthisis"></div>
<div id="content">
<div id="contentLeft">
<div class="somethingintheleft">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="somethingintheleft">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<br class="clear" />
</div>
<div id="contentMiddle">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="contentRight">
<div class="somethingintheright"> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div>
</div>
</div>
<br class="clear" />
</div>
</body>
</html>
Vexir
November 10th, 2006, 12:41 AM
:P thanks simp... i think ill do it in tables first just to meet the deadline then screw around with that later. :)
simplistik
November 10th, 2006, 10:20 AM
hmmmnnn well that's a shame cause the layout is already done for you :P all you need to do is put in content... and in the long run it may be easier. shouldn't commit to deadlines you can't meet
fasterthanlight™
November 10th, 2006, 11:30 AM
A word of advice for the future,

If you are going to make a fluid layout, don't design your design with content boxes

What I mean is, try not to build your design up and around elements in Photoshop that will only look good IN Photoshop, for example, your sidebar content chunks.... those won't be fluid at all, they have rounded corners and drop shadows! Not that you can't do rounded corners and drop shadows with CSS, they're just difficult to do when you want a fluid layout

For fluid layouts its best to keep effects like those to a minimum, keep it simple gradients and boxes

Its a difficult balance, you kind of have to be able to tell the future, because not EVERYthing can be remade from Photoshop in HTML and CSS
brianmanden
November 10th, 2006, 11:32 AM
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Choose -> Copy -> Paste -> Edit -> Done ? ;)
fasterthanlight™
November 10th, 2006, 12:16 PM
Yea I freaking love those little boxes
Vexir
November 10th, 2006, 02:42 PM
Well, the good news is that I am completely done with coding the layout in tables, and it works just fine (except for a minor glitch in FF, which occurs for some reason even if I use div's).

I'll try it out with the CSS solution Simp posted in a bit.


What I mean is, try not to build your design up and around elements in Photoshop that will only look good IN Photoshop, for example, your sidebar content chunks.... those won't be fluid at all, they have rounded corners and drop shadows! (Not that you can't do rounded corners and drop shadows with CSS, they're just difficult to do when you want a fluid layout)

Nope, I did it with tables just now and it was easy :)