DIV issue

[sonsyphon]

I'm currently experimenting with the layout of my website but there's a problem I'm trying to resolve.

The website needs to exist with and without advertisements, as shown in the examples

With ads
without ads

I want the DIVS en TABLES to adjust in width when advertisements are shown. The text after the advertisements needs to be shown on the whole page and because of that, my problem occurs. As you can see the DIV and TABLE continious underneath the advertisement.

HTML CODE

<div id="content">
  <div class="ads_160x600_content"><img src="layout/images/ads.gif" alt="ads" /></div>
  <div style="background-image:url(layout/images/titlebar.gif); background-repeat:no-repeat">	
    <div style="position:relative; height:25px;">	
      <div style=" float:left; background:#fff; margin-left:20px; padding:0px 5px 0px 5px;">
	<h1><?php echo $_content_title[$_GET['content']][$_GET['lang']]; ?></h1>
      </div>			
    </div>
    <?php include 'content_navigation.php'; ?>
  </div>
  <div class="after_float"></div>
</div>

CSS CODE

#content {
  border: 1px solid #08699c; 		
  float:right;
  padding: 3px;
  width:781px;
}

.ads_160x600_content {
  position: relative;
  background-color:#fff;
  float: right;
  width: 160px;
  height: 600px;
  padding-left:3px;
  top:0px;
  right:0px;

}

.after_float {
  clear:both;
}

 

[Geodun1]

Add a margin-right: 170px; property to the css controlling your table with the ads on. This should push the table over so that it doesn't go underneath the ad.

 

[zkiller]

Here's a dynamic solution to your problem.

Example link: http://www.trackdevil.com/misc/wdf/div-test/

CSS

.container {
	position: absolute;
	width: 789px;
 	border-width: 2px; 
	border-style: solid;
	border-color: #08689A;
}
.header {
	float: left;
	width: 781px;
	margin-left: 4px;
	margin-top: 5px;
}
.content {
	float: left;
	width: 781px;
	margin-left: 4px;
	clear: both;
}
.table {
	float: left;
	width: 620px;
}
.ads {
	float: right;
	width: auto;
	display: block;
}
. content p {
	margin: 0px;
	padding: 20px 0px 0px 0px;
}

Javascript

function adsOn() {
	document.getElementById('ads').style.display = 'block';
	document.getElementById('table').style.width = '620px';
}
function adsOff() {
	document.getElementById('ads').style.display = 'none';
	document.getElementById('table').style.width = '781px';
}

HTML

<div class="container">
  <div class="header"><img src="header.jpg" /></div>
  <div class="content">
  	<div id="ads" class="ads"><img src="ads.jpg" /></div>
    <div id="table" class="table">
      <table width="100%"  border="2">
  	    <tr>
          <td><a href="javascript:adsOn();">Ads On</a></td>
          <td><a href="javascript:adsOff();">Ads Off</a></td>
          <td>Some title</td>
        </tr>
        <tr>
          <td>Some title;</td>
          <td>Some title</td>
          <td>Some title</td>
        </tr>
        <tr>
          <td>Some title;</td>
          <td>Some title;</td>
          <td>Some title;</td>
        </tr>
      </table>
	</div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque urna. Aenean vulputate, augue sed consequat semper, dui est sodales nibh, nec auctor ante tellus a nunc. Nullam lacinia, enim quis pellentesque placerat, arcu lorem feugiat velit, et varius dolor dolor quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ac justo. Nullam vulputate tincidunt lectus. Proin iaculis, tellus et posuere placerat, est quam dictum ligula, et porta nunc ipsum eget libero. Integer dapibus auctor orci. Etiam sodales blandit magna. In eros augue, placerat sit amet, auctor sit amet, bibendum non, magna. Nam congue. Aenean sit amet elit sed neque posuere condimentum. In sapien libero, lobortis laoreet, consequat nec, bibendum ut, est. Aenean ipsum purus, porta ac, bibendum a, interdum tempor, est.</p>
	<p>XCras arcu diam, tincidunt sit amet, commodo sed, lobortis eget, velit. Duis commodo, dui vel posuere tristique, libero risus congue justo, sed ornare libero pede nec lacus. Nam auctor consectetuer quam. Duis faucibus. Vivamus rhoncus bibendum libero. Curabitur velit. Morbi urna ipsum, aliquam ac, consequat et, tincidunt vel, leo. Phasellus et ligula nec ante blandit pulvinar. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.V
	<p>Integer faucibus, dolor non dignissim volutpat, risus tellus pulvinar mi, id consequat nulla turpis vitae pede. Nulla facilisi. Integer feugiat. Ut ornare enim id ipsum. Nullam nec mauris a ligula varius egestas. Fusce condimentum. Ut accumsan feugiat odio. Curabitur in nulla. Praesent tortor sapien, sagittis ac, iaculis non, varius vitae, quam. Nunc lorem. Sed ultricies orci ac lorem. Curabitur dui. Ut non dolor eget velit tempus auctor. Pellentesque molestie libero ut velit. Nam varius interdum massa. Nullam congue nibh et nisl. Proin id nunc.</p>
	<p>Nam placerat mi scelerisque nibh. Morbi porta. Etiam sed tortor ac nibh tincidunt consectetuer. Suspendisse vestibulum, mi at lobortis laoreet, nisi nunc condimentum magna, vel tempor odio dui id magna. Praesent nec nisi. Aenean quis velit in dolor posuere commodo. Ut interdum. Sed id sapien varius nibh interdum gravida. Sed malesuada nisl nec ipsum. Sed sit amet odio cursus justo semper commodo. Aliquam velit sapien, posuere eget, pulvinar nec, venenatis eget, pede. Aenean ac magna et ligula vulputate cursus. Sed ultrices, augue sit amet posuere semper, felis magna fermentum nisl, vitae condimentum arcu arcu et arcu.</p>
	<p>Quisque a nunc eget est sollicitudin ultrices. Mauris ut eros. Fusce mollis. Duis ultricies. Etiam adipiscing varius lacus. Nulla fermentum. In egestas, lacus ut iaculis luctus, nibh nunc tempor urna, in mattis sem augue at enim. Nunc eleifend eleifend massa. Morbi feugiat mattis nisl. Nunc vehicula, elit id dictum ultricies, magna enim sagittis ligula, et vulputate justo nulla nec ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ullamcorper. In quis libero. Sed hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut volutpat dui bibendum dolor. Quisque ac libero rhoncus purus rhoncus ultrices. Sed vel pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  </div>
</div>

Hope that helps.

PS: What can I say, I'm bored.

 

[sonsyphon]

hmm, Zkillers result looks good, i'll try to implement it

 

[zkiller]

Did you miss my post above? Basically, it is as simple as placing the table into it's own div and setting the width dynamically for ads or no ads.

 

[sonsyphon]

I tried it but it still doesn't really answer my question.

Imagine you add a second table.
both tables are changed to width 620px if ads are shown.
But table 1 keeps expanding and shrinking dynamically.

If table 1 is larger in height than the advertisement,
then table 2 still has 620px width.

I doubt there is a way
(to change to width when an ad is showing (like you did) and on top of that telling the table NOT to change width if it starts under the ad)

and should that be possible, then I still need to find a way to do it dynamically (should the advertisement change in height)

Wishfull thinking

 

[zkiller]

Can you show me an example? Would be easier to find a suitable solution for you, if I could visualize what exactly you are working with and what you are trying to achieve.

 

[sonsyphon]

Here's the example

Example

As explained in example 3. It can't be checked on the height of table 1. Because it's possible that it takes 3tables to reach the end of the advertisement and the 4th table starts width the full width.

And on another day it's possible that table3 starts under the advertisement

 

[Geodun1]

Just create an id for a table with the ad, and another for one below the ad. ZKiller will probably explain more if you need it

 

[zkiller]

Here's the example

Example

As explained in example 3. It can't be checked on the height of table 1. Because it's possible that it takes 3tables to reach the end of the advertisement and the 4th table starts width the full width.

And on another day it's possible that table3 starts under the advertisement

Shish, how many tables are you using? Might want to look into some tableless solutions as they are more flexible for things like this.

Any ways, since you are working with an unknown number of tables and the height of these is unknown, it makes things really difficult. I am sure their is a way to dynamically figure out the height of each table, but that is beyond me at the moment. Like I said above, a tableless solution would be more flexible and easier to work with here. Your simplest bet might be to switch to a vertical ad block.

 

[zkiller]

Just create an id for a table with the ad, and another for one below the ad. ZKiller will probably explain more if you need it

Hmmm... I see what you are saying and this was my thought initially as well, but you would still have the same problem while trying to apply the appropriate width to multiple tables. If each table had a fixed height, this would be as simple as pie.

 

[sonsyphon]

if there is a way to check the height of a table or div in Javascript, then it could be done.

check total height of advertisement = xxx px (example 900px)

check total height of tabel 1 = 600px
check total height of tabel 2 = 350px
check total height of tabel 3 = 100px

count(height tabel1 + height tabel2)

if total height is larger than 900px => use full width

 

[zkiller]

Ok, I did a little research for your - Google is my friend. Their isn't any proven way to get the table height before it has been rendered by the browser. However, this shouldn't be a problem. With the help of a Javascript library such as jQuery you can get the height of a element once rendered.

So, placing something along the lines of the following code at the end of the content section should work.

var height = $('#table').height();
var height2 = $('#table2').height();
var ads = "123"

if (height < ads) {
  if (height + height2 < ads) {
    document.getElementById('table3').style.width = '620px';
    document.getElementById('table2').style.width = '620px';
  } else {
    document.getElementById('table3').style.width = '781px';
    document.getElementById('table2').style.width = '620px';
  }
  document.getElementById('table3').style.width = '781px';
  document.getElementById('table2').style.width = '781px';
}

You will need to do a bit more research into this of course, but it should work.