Side by side DIV tags - dynamically changing

I have side by side div tags - each container is 300px wide. Sometimes both containers are filled - other times only the left container - this happens dynamically and i don't have control of this.

So, I would like to have the left container center itself with the 600px area when the right container is empty. Any ideas?

I have tried changing the floats, but cannot seem to get it to work. Thanks in advance for your ideas...

 

float:left should work...we can't not help without seeing your actual code

 

Unless I'm mistaken, floating the DIV won't help in this case. 

From initial impressions I would say that it depends how your content is being loaded. If you're using PHP to output the page then you could use PHP to output different HTML depending on the number of columns you require. If on the other hand you're using JavaScript to load content in, you could use JS instead.

I know my answer is a little vague, but as lang_tu_ntt said, it's pretty hard to help without seeing some code.

An alternative (and not so great) solution would be to use a table with 2 cells. If you don't assign a width to them the left hand cell would grow in width when there's nothing in the right cell. Again, this isn't a great solution but a solution nonetheless. 

If you could give us more code/information then we can give you a better solution.

 

Thanks for your help, here is a sample of what I am trying to do...

<div id=”content” style=”width: 620px;”>

<div id=”container1” style="width: 320px; height: 250px; float: left;"></div>

<div id=”container2” style="width: 300px; height: 250px; float: right;"</div>

</div>

I have a flash player that is pulling video and sometimes a 300x250 banner. It places the video into "container1" and if there is a 300x250 banner, it goes into "container2". In a scenario where there is nothing in container2, i would like the container1 to be centered within the "content" div.

I am sure we can do this dynamically from within the flash, but we are trying to avoid that if at all possible.

Again, thanks everyone for your help.

 

i guess the only way to do that is hide container2 when there's nothing in there by using php. because if you put container2 in there, no matter it's empty or not, html will save that space for container2. i hope i'm not too confusing

<div id=”content” style=”width: 620px; margin: 0 auto;”>
<div id=”container1” style="width: 320px; height: 250px; float: left;"></div>
<?php
if (there is something in container2)
{
?>
<div id=”container2” style="width: 300px; height: 250px; float: right;"</div>
<?php
}
 ?>
</div>

hope that helps. i won't know the result until we saw the entire code but i guess that could work 

 

I just noticed I actually misunderstood the behaviour you wanted when the right hand column isn't present. Ignore my solution regarding tables as it's completely wrong.

Just wanted to point out that this isn't how it acts in some cases. I mean, yes it is there, but it looks as if it doesn't. For example you have 3 divs floated to the left to form 3 columns, and you remove the content from the center div, the right hand div would move across as if the center one doesn't exist. This does of course depend on several factors but it's something worth keeping in mind. I coded a little example here, http://viral-monopoly-review.net/example.html. Clicking on the link will remove the content from the center div using jQuery, and you can see the behaviour I'm talking about, i.e. the center div disappearing. The center div is in fact still there, but as it has 0px height the right hand div moves across.
  
Thinking about it though, how about this solution utilizing that to your advantage? I'm not sure if it would suit your needs as you haven't shown us your website but here it is: http://viral-monopoly-review.net/example2.html. There's basically a parent container, in this case <div id='wrapper'> which has a set width of 600px and has text-align set to center. You then place the right hand div first which is floated right, followed by your left hand video player. When the floated div has no content, has 0 height and therefore the video is placed in the center of the parent div.

One thing to note is that you can't have any padding/margin on the floated div. You should instead set it on the contents, like I have done on the <h1> and <p> in this case.

I hope that helps. I haven't actually checked it fully works in IE, FF etc... as I'm a new Mac user and haven't got IE installed, and also FF for some reason freezes constantly... Let me know how it works out for you.

Oh and sorry about the cat, I just couldn't resist! 

 

thanks for the suggestions - going to give these a shot

 

How did it work out for you?