Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
    display: table;
    width: 100%;
      background: lightgreen;
}   
    .focus { 
      height: 500px;
    }
.sliderContainer {
    display: table-cell;
    width: 40%;
    height: 100%;
  vertical-align: top;
  background-color: white;
    
}
.slider {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: table;
    height: 100%;
    width: 100%;
}
.slider li {
    display: table-row;
    cursor: pointer;
    height: 25%;
    min-height: 25%;
    max-height: 25%;
  background-color: pink;
  overflow: hidden;
}
    .sliderDetails {
      border-bottom: 1px solid black;
      padding-bottom: 5px;
    }
  </style>
</head>
<body>
​
<div class="container">
            <div class="focus">
                <div>
                    <div>
                    </div>
                    <div class="focusDetails">
                        <div class="focusTitle"></div>
                        <div class="focusDesc"></div>
                    </div>
                    <div class="previous" style="display:none;"><span></span></div>
                    <div class="next"><span></span></div>
                </div>
            </div>
            <div class="sliderContainer">
                <ul class="slider">
                    <li>
                        <div class="sliderImg">
                        </div>
                        <div class="sliderDetails">
                            <div>
                                <div class="sliderTitle">Town Hall Meeting Presentation - Sunstar Italiana</div>
                                <div class="sliderDesc">On Tuesday, June 30 all Sunstar Italiana employees took part to the Town Hall Meeting presentation made by the General Manager, Marco Bruscaini. Through his</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="sliderImg">
                        </div>
                        <div class="sliderDetails">
                            <div>
                                <div class="sliderTitle">Top Management Visits the HQ in Etoy</div>
                                <div class="sliderDesc">The welcome to the Sunstar Headquarter June Meetings' attendees from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one The welcome to the Sunstar Headquarter June Meetings' attendees from Asia, Japan, and the US was done as a tour to the Sunstar Campus' two buildings, the new and previous one</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="sliderImg">
                        </div>
                        <div class="sliderDetails">
                            <div>
                                <div class="sliderTitle">Distributor meeting</div>
                                <div class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="sliderImg">
                        </div>
                        <div class="sliderDetails">
                            <div>
                                <div class="sliderTitle">Distributor meeting</div>
                                <div class="sliderDesc">For the 3rd year we have organized our Distributor meeting taking place this time in our new building in Etoy, Switzerland.This year, we decided to extend our invitation to all the</div>
                            </div>
                        </div>
                    </li>   
                </ul>
            </div>
        </div>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers