Home/ Questions/Q 8924191
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:20:36+00:00

I’ve been probing this for hours to no avail. I’m basically converting my site

  • 0

I’ve been probing this for hours to no avail. I’m basically converting my site from the outdated table-setup to a div-setup.

Here is a sample of the kind of thing I had in a table set-up:
http://jsfiddle.net/vxgqE/2/

This is it with a div set-up:
http://jsfiddle.net/G3bNh/

I’ve managed to align DIV’s correctly using the float: left and position: relative properties, but the problem I’m finding is that when the right cell (see link above) grows in height, the left cell grows – this doesn’t happen in a similar situation in a div set-up.

How can I make sure those two middle cells always maintain the same height?

I understand there are tonnes of JavaScript and jQuery solutions out there…but are there any pure HTML/CSS solutions?

Thanks for your input, its really appreciated.

enter image description here
HTML code:

<table>
    <tr>
        <td class="top">
            <!-- image1 !-->
        </td>
    </tr>
    <tr>
        <td class="mid1">
            <p>
                exrc fdbodf nosdf ifd onsdfo nj dfnsn a fnl mfasn saf
            </p>
        </td>
        <td class="mid2">
            <p>
                exrc fdbodf nosdf ifd onsdfo nj dfnsn a fnl mfasn saf
            </p>
        </td>
    </tr>
    <tr>
        <td class="bot">
            <!-- image2 !-->            
        </td>
    </tr>
</table>

Div code:

<html>
<head>


<style type="text/css">
div {border: 1px solid;}

#arrowItem {
position: absolute;
float: left;
width: 100%;
}


#arrowItem-ArrowTop {
background-image: url('img/About-Process_ArrowsTop.png'); 
height: 70px;
width: 300px;
}

#arrowItem-ArrowCenter {
position: absolute;


}

#arrowItem-ArrowBot {
background-image: url('img/About-Process_ArrowsBot.png'); 
height: 70px;
width: 300px;
}

#arrowItem-RightText {
position: absolute;
float: left;
position: relative;
width: 600px;

}

#arrowItem-text1 {
position: relative;
float: left;
width: 300px;
background-color: #d4e0a9; 
border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
}

#arrowItem-text2 {
position: relative;
float: left;
width: 300px;
}

</style>

</head>
<body>




<div id="arrowItem">
 <div id="arrowItem-ArrowTop">
 </div>
 <div id="arrowItem-ArrowCenter">
  <div id="arrowItem-text1">
   <p>
   1234567812345678
   </p>
  </div>
  <div id="arrowItem-text2">
   <p>
   23456723456789
   </p>
  </div>
 </div>
 <div id="arrowItem-ArrowBot">
 </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After literally a day of tinkering I have figured it out myself…and I cant believe it took so long.

    The solution is to use a couple of carefuly placed divs using the left:-300 negative attribute as well as the negative margin attribute. The complete code for my specific project is below:

    <html>
<head>


<style type="text/css">
div {border: 0px;}

#arrowItem {
position: relative;
float: left;
width: 100%;
}


#arrowItem-ArrowTop {
position: relative;
background-image: url('img/About-Process_ArrowsTop.png'); 
height: 70px;
width: 300px;
}


#arrowItem-ArrowBot {
position: relative;
background-image: url('img/About-Process_ArrowsBot.png'); 
height: 70px;
width: 300px;
left: -300px;
top: +70px;
margin-top: -70;
}

#arrowItem-RightText {
position: absolute;
float: left;
position: relative;
width: 600px;

}



#arrowItem-text1 {
position: relative;
left: 300px;
width: 500px;
}

#arrowItem-text2 {
position: relative;
top: -100px;
width: 300px;
height: 100px;
background-color: #d4e0a9; 
border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
}

#test1 {
position: absolute;
top: 0px;
left: -300px;
width: 300px;
padding: 0px;
margin: 0px;
height: 100%;

border-right: 2px solid #a0b165; 
border-left: 2px solid #a0b165; 
}
</style>

</head>
<body>




<div id="arrowItem">
 <div id="arrowItem-ArrowTop">
 </div>

 <div id="arrowItem-ArrowCenter">
  <div id="arrowItem-text1">
   <p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
   </p>
   <div id="test1">
   ddd
   </div>
   <div id="arrowItem-ArrowBot">
   </div>
  </div>


 </div>

</div>
</html>
    • 0