10 replies [Last post]
jfleblanc
Offline
newbie
Last seen: 12 years 4 weeks ago
Joined: 2008-07-02
Posts: 4
Points: 0

Hi, I do believe I have a hard one.

I believe this is possible but I can't figure how.

I would like to have 2 rows of div using different type of blocs (div)

Divs that would be:

- 300x300
- 600x300
- 300x600

Here's an exemple of how it would look.

[X][X][-X--]|­¯|[X][X]|¯|[X]
[X][X][X][X]|_|[-X--]|_|[X]
­
Blocks could be easily swapable between the different type (300x300,300x600, etc)

Is this possible?

If so, if you have an exemple of this working, it would be greatly appreciated.

Thanks for your help.

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 38 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Try this ...

jfleblanc wrote:

Hi, I do believe I have a hard one.

I believe this is possible but I can't figure how.

I would like to have 2 rows of div using different type of blocs (div)

Divs that would be:

- 300x300
- 600x300
- 300x600

Here's an exemple of how it would look.

[X][X][-X--]|­¯|[X][X]|¯|[X]
[X][X][X][X]|_|[-X--]|_|[X]
­
Blocks could be easily swapable between the different type (300x300,300x600, etc)

Is this possible?

If so, if you have an exemple of this working, it would be greatly appreciated.

Thanks for your help.

Try thinking back to how you formatted your layout with tables and then approach it from that angle:

<div id="row1">
  <div class="px300"></div>
  <div class="px600"></div>
  <div class="px300"></div>
</div>
<div id="row2">
  <div class="px300"></div>
  <div class="px600"></div>
  <div class="px300"></div>
</div>

Set your rows to a specific (of 100%, if you want) width and then make sure the divs you're putting inside are equal or less to the width of the row. Create a class for each type of box ... 300px wide ... 600px wide and at the very least, you should be able to isolate each cleared row ... hope this helps!

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

jfleblanc
Offline
newbie
Last seen: 12 years 4 weeks ago
Joined: 2008-07-02
Posts: 4
Points: 0

Hi Greg, Thanks for your

Hi Greg,

Thanks for your fast answer.

I did that part, however, and I think I didn't explain it really well, the difficult part of this is to "simulate" colspans and rowspans with div because as you can see in the little graphical exemple I made.

Some boxes will be 1x1, 1x2 or 2x1.

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 38 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Uhm ...

Aren't ya talking about something like this??

<!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" />
<title>Untitled Document</title>
 
<style>
#row1,
#row2 {
	width: 1510px;
	clear: both;
	}
 
.px300 {
	width: 300px;
	height: 300px;
	float: left;
	background-color: #ccc;
	border: solid 1px #f00;
	}
 
.px600 {
	width: 600px;
	height: 300px;
	float: left;
	background-color: #333;
	border: solid 1px #00f;
	}
 
</style>
</head>
 
<body>
 
<div id="row1">
	<div class="px300"> </div>
	<div class="px300"> </div>
    <div class="px600"> </div>
	<div class="px300"> </div>    
</div>
<div id="row2">
	<div class="px600"> </div>
	<div class="px300"> </div>
    <div class="px300"> </div>
	<div class="px300"> </div>    
</div>
</body>
</html>

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

jfleblanc
Offline
newbie
Last seen: 12 years 4 weeks ago
Joined: 2008-07-02
Posts: 4
Points: 0

Exactly, this simulate the

Exactly,

this simulate the colspan, however, how do you simulate a rowspan within your exemple and keep the same horizontal flow of the boxes?

Thank very much again for your time.

JF Leblanc

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 38 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Clarify ...

jfleblanc wrote:

Exactly,

this simulate the colspan, however, how do you simulate a rowspan within your exemple and keep the same horizontal flow of the boxes?

Thank very much again for your time.

JF Leblanc

You're going to have to clarify that one for me. What are you trying to achieve ... same width "rows"? Same height "rows"?

Could you, by chance, sketch it out or make a quick photoshop mockup and show it to me? I can probably make it happen for ya!

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

jfleblanc
Offline
newbie
Last seen: 12 years 4 weeks ago
Joined: 2008-07-02
Posts: 4
Points: 0

I hope this exemple can

I hope this exemple can help you. Your exemple works great, however, i'm trying to achieve that red box thing.

There might be more than one of these boxes. The pattern shown in the image is just an exemple.

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 38 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

sorry ...

Had a CRAPPY four hour meeting. Lemme see what I can work out for ya ...

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 38 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Voila!

jfleblanc wrote:

I hope this exemple can help you. Your exemple works great, however, i'm trying to achieve that red box thing.

There might be more than one of these boxes. The pattern shown in the image is just an exemple.

A little trickery and humbuggery did it. Looks like if you want it to do it, you'll need a specified pattern. I added borders to show the delineation between the 300px-wide boxes and such. You'll want to adjust accordingly. Styles and HTML are in the same document for ease:

<!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" />
<title>Layout Sample</title>
 
<style>
body {
	margin: 15px 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.1%;
	line-height: 100.1%;
	background-color: #fff;
	}
 
#wrapper {
	width: 1525px;
	margin: 0 auto;
	}
 
.px300 {
	width: 300px;
	height: 300px;
	float: left;
	background-color: #333;
	border: solid 1px #00f;
	}
 
.px300left {
	width: 300px;
	height: 300px;
	margin-left: 302px;
	float: left;
	background-color: #333;
	border: solid 1px #00f;
	}
 
.px600 {
	width: 602px;
	height: 300px;
	float: left;
	background-color: #999;
	border: solid 1px #f00;
	}
 
.px300tall {
	width: 300px;
	height: 602px;
	float: left;
	margin-left: 906px;
	margin-top: -604px;
	background-color: #900;
	border: solid 1px #0f0;
	}
 
</style>
</head>
 
<body>
 
<div id="wrapper">
	<div class="px300"> </div>
    <div class="px600"> </div>
    <div class="px300left"> </div>
    <div class="px300"> </div>
    <div class="px300"> </div>
    <div class="px300"> </div>
    <div class="px300left"> </div>
    <div class="px300tall"> </div>
</div>
 
</body>
</html>

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 38 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

greg420blues wrote:jfleblanc

greg420blues wrote:
jfleblanc wrote:

I hope this exemple can help you. Your exemple works great, however, i'm trying to achieve that red box thing.

There might be more than one of these boxes. The pattern shown in the image is just an exemple.

A little trickery and humbuggery did it. Looks like if you want it to do it, you'll need a specified pattern. I added borders to show the delineation between the 300px-wide boxes and such. You'll want to adjust accordingly. Styles and HTML are in the same document for ease:

<!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" />
<title>Layout Sample</title>
 
<style>
body {
	margin: 15px 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.1%;
	line-height: 100.1%;
	background-color: #fff;
	}
 
#wrapper {
	width: 1525px;
	margin: 0 auto;
	}
 
.px300 {
	width: 300px;
	height: 300px;
	float: left;
	background-color: #333;
	border: solid 1px #00f;
	}
 
.px300left {
	width: 300px;
	height: 300px;
	margin-left: 302px;
	float: left;
	background-color: #333;
	border: solid 1px #00f;
	}
 
.px600 {
	width: 602px;
	height: 300px;
	float: left;
	background-color: #999;
	border: solid 1px #f00;
	}
 
.px300tall {
	width: 300px;
	height: 602px;
	float: left;
	margin-left: 906px;
	margin-top: -604px;
	background-color: #900;
	border: solid 1px #0f0;
	}
 
</style>
</head>
 
<body>
 
<div id="wrapper">
	<div class="px300"> </div>
    <div class="px600"> </div>
    <div class="px300left"> </div>
    <div class="px300"> </div>
    <div class="px300"> </div>
    <div class="px300"> </div>
    <div class="px300left"> </div>
    <div class="px300tall"> </div>
</div>
 
</body>
</html>

Oh hey ... you'll probably want to make multiple styles for that vertical box if you want to arbitrarily put it in the mix. Each one will depend on where in the column structure you want the red box.

Soooo .. if you want it in the 2nd column, you'll want to create a style that gives it a 300px left margin, for instance. Make sense? Third column? 600px left margin.

If you'll consider the layout like Tetris ... that first box is fine, then the 600 box is cool, but then you want to leave 300 pixels for the left margin for the red box to scoot up.

CRAP. Just noticed an IE error. I'll try and fix it for you. Works in Mozilla, though.

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 38 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Okay ...

It was a pretty simple fix ... just add in this IE hack:

* html .px300tall {
	float: right;
	margin-right: 300px;
	}

Greg Altuna
BrownCo Media
http://www.browncomedia.com/