css/php: how to solve this div float problem / odd even loop in array

Question

My code is at the end of this post.

How on earth do i get "box 3" to aligh next to "box 1" OR to the content inside "box 1" instead of aligning itself at the end of "box 2".

The important thing here is that all four boxes MUST use the same style - (style 2) as it's being used in an called by an array.

Here is what it is now and what i#m trying to make happen:

http://img524.imageshack.us/img524/1408/lastexample.gif

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {border:1px solid #000000; width:620px; position:relative;
}
.style2 {border:1px solid #000000; width:300px; float:left;}
-->
</style>
</head>

<body>
<div class="style1">

    <div class="style2">box 1<br>
      <br>
      <br>
    </div>
    <div class="style2">box 2<br>
      <br>
      <br>
      <br>
  </div>

    <div class="style2">box 3<br>
      <br>
    </div>
    <div class="style2">box 4<br>
      <br>
      <br>
    </div>
</div>
</body>
</html>

phh is now added to an answer on this page with instructions — Jim
– Jim, Commented Sep 9, 2009 at 19:56

Larsenal · Accepted Answer · 2009-09-09 18:56:48Z

2

Don't know of a way to get this with pure CSS using a single class for all the interior DIVs. You want something like Masonry.

Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

-The Masonry home page

answered Sep 9, 2009 at 18:56

Larsenal

51.5k43 gold badges155 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jim Over a year ago

i like the look of this, but i'd rather find a simpler solution, thanks though, was interesting.

MiseryIndex · Accepted Answer · 2009-09-09 18:52:02Z

0

I think it's impossible to do that with just one style. I would probably apply float: left to every odd box and float: right to every even box. That way you can loop over your array and apply an appropriate class and not give special treatment to any particular box.

answered Sep 9, 2009 at 18:52

MiseryIndex

1,3622 gold badges17 silver badges24 bronze badges

2 Comments

Jim Over a year ago

that sure does seem to be the correct css solution to achieve what i need. Now i need to figure out how to get allow and even and odd style in the array, which i don#'t actually know how to do :(

Jim Over a year ago

php, i'm not a coder, though, so to me its tricky to do things like this.

Serge Bogatyrev · Accepted Answer · 2009-09-09 19:07:51Z

0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {border:1px solid #000000; width:620px; position:relative;}
.style2 {border:1px solid #000000; width:300px; float:left;}

.col1 {
width:300px;
float:left;
}
.col2 {
margin-left:300px;
}
-->
</style>
</head>

<body>
<div class="style1">
<div class="col1">
    <div class="style2">box 1<br>
      <br>
      <br>
    </div>
    <div class="style2">box 3<br>
      <br>
    </div>
</div>
<div class="col2">
    <div class="style2">box 2<br>
      <br>
      <br>
      <br>
  </div>
    <div class="style2">box 4<br>
      <br>
      <br>
    </div>
</div>
</div>
</body>
</html>

answered Sep 9, 2009 at 19:07

Serge Bogatyrev

8164 silver badges5 bronze badges

2 Comments

Jim Over a year ago

wowza, i think you've cracked it. I'll try this on my site and report back.

Jim Over a year ago

spoke too soon, its an array, the code saying <div="style1"></div> is called each time for every box (using dynamic content), so i can't have new divs inbetween the calling of this.

Philip Tinney · Accepted Answer · 2009-09-09 19:13:48Z

0

I am going to assume these divs are being dynamically created.

Your current problem is you can't get the floated items any lower than the tallest of the divs in that row. I can't think offhand of a way to do what you want using css. However if you are creating these divs by looping over an array, it is solveable.

I would probably create two side by side divs and in the loop check for if the loop count is even. If it is append the dynamic div to the right column instead of the left. This will look odd, if the height of the divs ends up being greater on one side, but this could possibly be fixed by keeping track of div heights and assigning the new div to the shorter column, instead of by alternating even and odd.

answered Sep 9, 2009 at 19:13

Philip Tinney

2,01618 silver badges19 bronze badges

1 Comment

Jim Over a year ago

i'd love to add an even/odd part to the loop, but at present i do not know how to do this. How's about i show you the php code for this loop, and someone could try to give me the option of an even/odd part to this?

coderex · Accepted Answer · 2009-09-09 19:32:03Z

0

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {border:1px solid #000000; width:620px; position:relative;
}
.style2 {border:1px solid #000000; width:49%; float:left;}
.style3 {border:1px solid #f00; width:49%;margin-top:-20px;float:left;}
-->
</style>
</head>

<body>
<div class="style1">

    <div class="style2">box 1<br>
      <br>
      <br>
    </div>
    <div class="style2">box 2<br>
      <br>
      <br>
      <br>
  </div>

    <div class="style3">box 3<br>
      <br>
    </div>
    <div class="style2">box 4<br>
      <br>
      <br>
    </div>
    <div style="clear:both"></div>
</div>
</body>
</html>

try this one

answered Sep 9, 2009 at 19:32

coderex

28.1k46 gold badges120 silver badges172 bronze badges

3 Comments

Jim Over a year ago

it's an array, therefore i cannot modify willy nilly inside of the loop, or can i create style 3 in the loop, its all dynamic at present.

coderex Over a year ago

how may iterations in ur loop? This four only ? or set of 4 divs

Jim Over a year ago

one div is being repeated for as many as meet the criteria, and then repeated.

Serge Bogatyrev · Accepted Answer · 2009-09-09 19:39:26Z

0

Another one. Probably, you can mark odd and even boxes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {border:1px solid #000000; width:620px; position:relative;}
.style2 {border:1px solid #000000; width:300px; }


.a {float:left;}
.b {float:right;}
-->
</style>
</head>

<body>
<div class="style1">
    <div class="style2 a">box 1<br>
      <br>
      <br>
    </div>
    <div class="style2 b">box 2<br>
      <br>
      <br>
      <br>
    </div>
    <div class="style2 a">box 3<br>
      <br>
    </div>
    <div class="style2 b">box 4<br>
      <br>
      <br>
    </div>
</div>
</body>
</html>

answered Sep 9, 2009 at 19:39

Serge Bogatyrev

8164 silver badges5 bronze badges

1 Comment

Jim Over a year ago

this will work only when the php script allows for an odd/even loop. I'm hoping someone will help me with this as i've now posted the script and where the loop is in this on this very page.

Jim · Accepted Answer · 2009-09-09 19:56:32Z

0

*FOLLOW ON TO CSS ISSUE, PHP CODE *

here is my code: http://www.pcgage.net/code.zip (sorry, pasting the code caused it to really mess up, even using the code container).

Scroll to line: 160 (to 174) - this is the loop in question. If i can simply have an odd/even, that would work perfectly. For now, who ever does this, just use the current code in the div for the new odd part, i can edit this to use a different style later.

Thanks for the help, it's been fantastic so far.

edited Sep 9, 2009 at 19:56

answered Sep 9, 2009 at 19:49

Jim

2272 gold badges3 silver badges16 bronze badges

Collectives™ on Stack Overflow

css/php: how to solve this div float problem / odd even loop in array

7 Answers 7

1 Comment

2 Comments

2 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

2 Comments

1 Comment

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related