ansaurus

Question

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

Answer 1

A:

You could use a CSS or HTML table to arrange the divs exactly how you want.

HTML example (I changed the class attribute to a more concise version because you used the same classes for everything):

<div class="style1 style2">
  <table>
    <tr>
      <td>box 1</br></br></br></td>
      <td>box 3</br></br></br></td>
    </tr>
    <tr>
      <td>box 2</br></br></br></td>
      <td>box 4</br></br></br></td>
    </tr>
  </table>
</div>

Also, it's better style to use a closing slash for tags that don't have both an open and close tag; that is, to use </br> and </hr> instead of <br> and <hr>. That's up to you but I figured I'd point it out.

maksim 2009-09-09 18:27:13

i don't see how that will work, can you show me? Did you understand what the issue at hand is here?

Jim 2009-09-09 18:33:08

I answered your first question: you wanted to have box 3 line up next to box 1, right? By putting them into an HTML table in the same row in side-by-side cells, you achieve that.

maksim 2009-09-09 18:36:47

To see it, paste my code into:http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_basic

maksim 2009-09-09 18:38:42

that's that what i was after, see the problem?<div class="style1 style2"> <table> <tr> <td>box 1</br></br></br></td> <td><p>box 3 <br> is now making box 1 much bigger than it needs to be, i want box two to push up to box 1</br> </br> </br> </p> </td> </tr> <tr> <td>box 2</br></br></br></td> <td>box 4</br></br></br></td> </tr> </table></div>

Jim 2009-09-09 18:40:43

If you want box 2 to be under box 1 and closer to it, you'd have to change the CSS of box 1 and/or remove the line breaks. Is that what you mean?

maksim 2009-09-09 18:42:53

nope, image all the divs (box 1 to 4) have different amounts of content in them (text basically). Now imagine i want them to align vertically right next to each other.All four divs must use the same style to achieve this as they are being called to be displayed in a php loop.

Jim 2009-09-09 18:55:13

Answer 2

A:

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.

MiseryIndex 2009-09-09 18:52:02

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 2009-09-09 18:58:38

What language/framework are you using to generate your HTML?

Larsenal 2009-09-09 19:05:19

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

Jim 2009-09-09 19:12:28

Answer 3

+2 A:

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

Larsenal 2009-09-09 18:56:48

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

Jim 2009-09-09 19:08:30

Answer 4

A:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<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>

serge_bg 2009-09-09 19:07:51

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

Jim 2009-09-09 19:13:59

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.

Jim 2009-09-09 19:16:55

ok, I will suggest another one.

serge_bg 2009-09-09 19:38:06

Answer 5

A:

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.

Philip T. 2009-09-09 19:13:48

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?

Jim 2009-09-09 19:27:05

Answer 6

A:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;
<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

coderex 2009-09-09 19:32:03

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.

Jim 2009-09-09 19:37:43

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

coderex 2009-09-09 19:40:06

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

Jim 2009-09-09 19:51:01

Answer 7

A:

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"&gt;
<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>

serge_bg 2009-09-09 19:39:26

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 2009-09-09 19:52:55

Answer 8

A:

*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.

Jim 2009-09-09 19:49:39

ansaurus

tags:

views:

answers:

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

related questions