PDA

Click to See Complete Forum and Search --> : CSS Grid Flow

ejbevan
02-28-2010, 11:06 PM
Hi folks,

Hope someone can help me out - appreciate whatever assistance upfront! So close to finishing a site up but struggling with probably a quite basic CSS component.

How can I set CSS to automatically flow on the following page so it runs like the image below (Photoshop). At the moment the CSS is running a grid from an old tumblr theme which I'm editing. But I can't find the correct code to set this form of flow rather than a columned grid!!

Here's the link:
http://jobelondon.tumblr.com/
<img src="http://www.jobe-group.com/xchange/oneb.jpg> (http://www.jobe-group.com/xchange/oneb.jpg)

The css source i'm using is here:
2010.css (http://www.jobe-group.com/xchange/2010.css)

Thanks so much folks, I really appreciate it!
John
Fang
03-01-2010, 02:50 AM
Be more specific about what has to be moved to where.
ejbevan
03-01-2010, 11:46 AM
At the moment the CSS on that page displays the items flow in columns. So you have the four blocks of white text with red backgrounds. Currently these display like:

Text 1 Text 2
Text 3 Text 4

and if I add more text components these will appear as:

Text 1 Text 2
Text 3 Text 4
Text 5 Text 6 Text 7 (if it is short)

Based on this, the text blocks will fill one below each other in columns so if one item is longer than other then there will be large breaks between blocks in one or more rows as you can see currently.

What I want to achieve is a continuous flow like:

Text 1 - Text 2 - Text 3 -
Text 4 - Text 5 - Text 6 - Text 7

where each block runs on from the former with 5px padding inbetween, until that line is full (i.e. up to a maximum width of 600px). After which blocks will get bumped down to the next line. As in the photoshop image uploaded. So therefore they don't stack in columns but stack in rows like a continual feed.

Hope that makes more sense!

Thanks so much, John
Fang
03-01-2010, 12:23 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;}
div {width:600px;}
div span {
float:left;
color:#fff;
background:#f03;
font-size:3em;
margin-left:5px;
margin-bottom:5px;
padding:3px;
}
</style>

</head>
<body>
<div>
<span>text 1</span><span>text 2</span>
<span>text 3</span><span>text 4</span>
<span>text 5</span><span>text 6</span>
<span>text 7</span><span>text 8</span>
</div>
</body>
</html>