Geek Answers Handbook

2 div columns: fixed and liquid. Fixed should be removable. Fluid must be first in code

Consider the following html 2 cols structure:

<div id="container"> <div class="left">some text</div> <div class="right">some text</div> </div>

CSS

 #container { overflow: hidden; } .left { float: left; width: 200px; background: red; } .right { overflow: hidden; background: green; }

Same code in jsFiddle - http://jsfiddle.net/vny2H/

So we have 2 columns. The width of the left column is fixed, the width of the right is liquid. If we remove the left column from html, the right column will stretch 100% of the length of the parent # container.

Question: can we change the order of the left and right columns? (I need this for SEO)

 <div id="container"> <div class="right"></div> <div class="left"></div> </div>

Thanks.

Added

There is one interesting method for achieving what I want, but the fixed column becomes not removable. The method is based on negative margin. http://jsfiddle.net/YsZNG/

HTML

 <div id="container"> <div id="mainCol"> <div class="inner"> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> </div><!-- .inner end --> </div><!-- .mainCol end --> <div id="sideCol"> <p>Some text</p> <p>Some text</p> <p>Some text</p> <p>Some text</p> </div><!-- .sideCol end --> </div><!-- #container end -->

CSS

 #container { overflow: hidden; width: 100%; } #mainCol { float: right; width: 100%; margin: 0 0 0 -200px; } #mainCol .inner { margin: 0 0 0 200px; background: #F63; } #sideCol { float: left; width: 200px; background: #FCF; }

So, we have 2 ways:

  • Using "float" for a fixed column and "overflow: hidden" for fluid. The fixed column becomes removable. But the liquid one takes second place in the code.
  • Using a negative field. The liquid column comes first in the code. But fixed is not removable.

Is there a third way when the fixed column is removable and the liquid column is the first in the code?

Added

A half solution was suggested by @lnrbob. The main idea is to use table divs. http://jsfiddle.net/UmbBF/1/

HTML

 <div id="container"> <div class="right">some text</div> <div class="left">some text</div> </div>

CSS

 #container { display: table; width: 100%; } .right { display: table-cell; background: green; } .left { display: table-cell; width: 200px; background: red; }

This method is suitable when a fixed column is placed on the right side of the site. But if we need it on the left, this is impossible to do.

+4
source share
7 answers

I still think this is pretty pointless work, because the only reason for this is the dubious benefits of SEO. But I was drawn so many times to this issue that I am going to bring something to the table.

If I were made to die in pain by death with a clean CSS solution, here it is, but I do not recommend:

http://jsfiddle.net/RbWgr/

Magic transform: scaleX(-1); . This applies to .container to flip the visual order, and then also to the child of the div so that the contents of each div do not flip.

  • It will not work in IE7 because I use display: table-cell .
  • It's not so hot in IE8 - any text looks awful, as usual with filter s. But it works.
  • Extra div should have wrappers working in Opera - and the text doesn't look perfect.

It works fantastically in other modern browsers (IE9, Chrome, Safari, Firefox), but applying transform to the parent "every element" can have unintended consequences.

+2
source

Consider the semantics of the content that you mark before anything else, which will almost always lead to a solution that has both decent markup and a search engine friendly.

For example, .right main content of the page and .left some additional information or navigation? In this case, mark it as such, and the search engines will interpret it well the way you want. HTML5 provides many elements for this purpose only:

 <div id="container"> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">etc.</a></li> </ul> </nav> <article> <h1>My nice, juicy content</h1> <p>Cool stuff, huh?!</p> <article> </div>

Or for additional content, you can consider <aside> or just <div role="supplementary"> .

Google will happily clean this up and find out the difference between navigation and actual content, the idea that the original order is important no longer applies to SEO just like it did a few years ago.

+6
source

Since your elements are the same height, you can do this:

 #container { overflow: hidden; position:relative; } .left { float: left; width: 200px; height: 200px; background: red; position:absolute; top:0; left:0; } .right { overflow: hidden; height: 200px; background: green; margin-left:200px;}

Script Page: http://jsfiddle.net/Ptm3R/9/

+3
source

Honestly, I'm not sure why you boil it to use only two id ([# left / # right] OR [ #mainCol / # sideCol ]) ...

It would not be much easier to use the mainCol / sideCol solution that you had in JSFiddle at http://jsfiddle.net/YsZNG/ and introduce a third class that could be applied to the main div if there is no sideCol programmatically.

Like at http://jsfiddle.net/biznuge/aAE3q/4/

Unfortunately. Maybe I missed all this, but I had a previous excruciating torment with an attempt to work in places with a liquid / fixed mixture, so I just thought that I would share my feelings about this ...

UPDATE

I presented a second answer to this question, which I think works. Sorry for the double answer, but it seemed quite different from my original answer that I thought he would stand on his two legs.

+2
source

Depending on your browser support requirements. For IE8 and above (and all modern browsers) you can use display: to set the layout of the table (still using <div /> ).

Here is an example - I just added javascript so that you can switch whether the element is hidden or not :)

+1
source

http://jsfiddle.net/biznuge/aAE3q/12/Zastastka>

This seems to suit the brief, I think. It works in FF anyway, but I'm not sure how other browsers can respond to table type display attributes.

UPDATE hit>

Try testing this in FireFox (4), IE (9), Opera (11), Safari (5) [Win] and Chrome (12), and the layout seems reliable in all browsers.

More surprising ...

UPDATE NEXT PROTECTION

thanks @thirtydot for this

http://jsfiddle.net/biznuge/aAE3q/19/

WORKS ONLY in Firefox 4, as far as I can tell, after some brief check ... But this is the beginning ...

+1
source

How about the left column inside the lower right?

http://jsfiddle.net/vny2H/32/

+1
source

More articles:


All Articles