Click here to Skip to main content
15,917,709 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi
i have 2 div inside main div.

with settings as :
HTML
<div>---main container
  <div>---display:none for Search panel on page load width:0
  </div>

  <div>----main content holder on page load width:100%
  </div>
</div>


I want to display :as block on button click with the sliding css.
Also changing the main content div width.

Any one please help

What I have tried:

.page{
      margin:0;
      width:100%; 
      height:100vh;  
 }
.page .maincontent{
      float:right;
      width:100%;
      
      
  }
  .page .pagesidebar
 {
    display:none;
    float:left;
    width:25%;
    overflow:hidden;
    height:100%;
 	background-color:#a4a4a4;
     border:1px solid black;
 	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;
     transition: .6s ease opacity,.6s ease transform;
   }
Posted
Updated 8-Jul-18 20:42pm
v3

1 solution

Quote:
a block-level element always takes up the full width available

So all you need is to change width:100% of main content to width:auto or omit it...

Edit fiddle - JSFiddle[^]
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900