simple scenario with DIVs

[Eduardo Bueno]

I have this simple scenario which I'm trying to find a css solution for. I have a page with two divs side by side - div1 and div2. at some point div2 may not be rendered, so I have div1 only and I want to align it to the center. I realized I can do it by changing its margin-left attribute, but first I must check if the other div (div2) was not rendered. how do I do this?

[Muhammad Saifuddin]

You can achieve this by using css selector.

.div1 {
  text-align:right;
    color:red;
}

.div2 {
    text-align:right;
  color: blue;
}


.div1 ~ .div2 {
  text-align:center;
}

For reading child-and-sibling-selectors to get the idea behind.

[Greg Charles]

The way I'm reading that last rule is: select .div2 if it is preceded by .div1, whereas I think Eduardo needs something that will select .div1 if it is not followed by by .div2. Am I reading that wrong? If not, then it might need some jQuery, because I believe styling is applied sequentially through the document. That is, there's no look-ahead to see what's coming next. Also, when you say div 2 isn't rendered, do you mean it's not in the DOM (or the page source) or is it there, and just set not to display?

[Eduardo Bueno]

You've read it right, Greg. Anyway I didn't know about those tricks - thank you very much Muhammad.

I can use jQuery and yes, it's not in the DOM.

[Greg Charles]

So, something like this should work:

jQuery(document).ready(function () { if ($('#div2').length > 0) { $('#div1').css('your styles for when div2 exists'); // or ... $('#div1').addClass('left-column'); } else { $('#div1').css('your styles for when div2 doesn''t exist'); // or ... $('#div1').addClass('stand-alone'); } });

[Eduardo Bueno]

Thank you very much, I didn't know I could use length() in this case.

[Bear Bibeault]

It's .length, not .length(), and it contains the number of matched elements in the jQuery wrapped set.