1

I am attempting to write a userstyle to reformat another website (no chance to change html).

Currently the website has main content on left with a full height sidebar on RHS.

I have used CSS to remove much of the sidebar content and would now like the main content to expand to fill the width of the area below the sidebar.

If I had control of the HTML source I would place the sidebar first with 'float: right' in the style but I don't have control of the source and the sidebar div is after main content.

Traditionally this couldn't be done in CSS but can it be done now using CSS3? and if so how?

The pages I am actually attempting to style are TripAdvisor Forum pages such as this one but they are overly complicated to attempt use as an example so I have created this very simple web page to play with:

<!DOCTYPE html>
<html>

<head>
  <style>
    #mainbody {
      border: 2px solid blue;
      width: 600px;
    }
    
    #sidebar {
      border: 2px solid green;
      position: inherit;
      float: right;
      width: 250px;
    }
    
    #content {
      position: inherit;
      width: 550px;
    }
  </style>
</head>

<body>
  <div id=mainbody>

    <div id=content>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa.</p>
    </div>

    <div id=sidebar>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. </p>
    </div>
  </div>

</body>

</html>}

With sidebar above content I get the desired format

double-beep
  • 5,031
  • 17
  • 33
  • 41
MymsMan
  • 191
  • 8
  • This would depend on the site. – jacksondc Jul 22 '14 at 21:49
  • 2
    Yes. It can be done. It's hacky and a total mess but you can restyle the main content to do virtually anything. To give concrete steps and CSS rules, we need to see the code. Otherwise it's all a hypothetical discussion of z-index, width and absolute positioning. – jdm2112 Jul 22 '14 at 22:00

1 Answers1

0

Using jQuery you can do this:

$("#content").insertAfter("#sidebar");

http://jsbin.com/juvoc/1/edit

Christina
  • 34,296
  • 17
  • 83
  • 119
  • Can jQuery be invoked from CSS? I dont have access to the HTML source! – MymsMan Jul 29 '14 at 16:22
  • You don't need access to the html source, but you can't call jQuery from CSS, you just use the existing external scripts and add it, if it's pure javascript, I have no clue. That would be a new question tagged javascript. – Christina Jul 29 '14 at 16:32
  • I have no access to scripts either - I am attempting to restyle a website I don't control using CSS – MymsMan Jul 29 '14 at 21:16