CODEWITHSUNDEEP
csssidebaruserstyles
MymsMan
MymsMan

Reputation: 193

How to restyle website to flow content around sidebar?

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

Upvotes: 1

Views: 221

Answers (1)

Christina
Christina

Reputation: 34652

Using jQuery you can do this:

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

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

Upvotes: 0

Related Questions