Clever Geek Handbook

Creating a simple sidebar layout in HTML and CSS

I'm trying to do a simple HTML layout with a sidebar on the left and a container on the right. The CSS codes I wrote are as follows:

body{
    margin: 0;
    padding:0;
}
.sidebar,.content{
    background: #333;
    color: #fff;
    height: 500px;
    border-radius: 4px;
    margin: 20px;
    border:1px solid #777;
}
.sidebar{
    width: 300px;
    float: left;
    position: absolute;
}
.content{
    width: 630px;
}

And simple HTML code:

<body>
  <div class="sidebar"> </div>

  <div class="content">  </div>
</body>

But it doesn't seem to work, although I thought using float: left solves the problem, but it seems like the right one goes on top of the other.

JSFiddle: Click here to see the JS Fiddle

+4


source to share


8 answers


check fiddle: https://jsfiddle.net/nileshmahaja/1hchree0/1/

Updated your css:

body{
    margin: 0;
    padding:0;
}
.sidebar, .content{
    background: #333;
    color: #fff;
    height: 500px;
    border-radius: 4px;
    border:1px solid #777;
}
.sidebar{

    width: 300px;
    /* float:left  Removed*/
    left:0; /* Added */
    top:0; /* Added */
    position: absolute;
}
.content{
    width: 630px;
    margin-left:300px /* Added */
}


Html

<body>
  <div class="sidebar"> </div>

  <div class="content">  </div>
</body>
0


source


Try this with float:

CSS

body {
        margin: 0;
        padding:0;
    }
    .sidebar, .content {
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        border:1px solid #777;
        float:left;
    }
    .sidebar {
        width: 300px;
    }
    .content {
        width: 300px; /*change it according to the design*/
    }
    body:after {
        clear:both;
        content:"";
        display:block; /*For clearing float*/
    }

Demo: http://jsfiddle.net/1hchree0/2/

Usage display:inline-block

:

CSS

        body {
        margin: 0;
        padding:0;
    }
    .sidebar, .content {
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        border:1px solid #777;
        display:inline-block;
    }
    .sidebar {
        width: 300px;
    }
    .content {
        width: 300px;
    }


HTML:

<body>
    <div class="sidebar"></div><div class="content"></div>
</body>

Demo: http://jsfiddle.net/1hchree0/4/

Using display:table

CSS

        body {
        margin: 0;
        padding:0;
        display:table;
    }
    .sidebar, .content {
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        border:1px solid #777;
        display:table-cell;
    }
    .sidebar {
        width: 300px;
    }
    .content {
        width: 500px;
    }

Demo: http://jsfiddle.net/1hchree0/8/

0


source


Add another div that has overflow: hidden;

Html

<body>
  <div class="container">
    <div class="sidebar"></div>
    <div class="content"></div>
  </div>
</body>

CSS

body {
  margin: 0;
  padding:0;
}  
.container {
  overflow: hidden;
}
.sidebar, .content{
  background: #333;
  color: #fff;
  height: 500px;
  border-radius: 4px;
  margin: 20px;
  border:1px solid #777;
}
.sidebar{
  width: 300px;
  float: left;
  position: absolute;
}
.content{
  width: 630px;
}

Sample script:

http://jsfiddle.net/skeurentjes/1hchree0/3/

0


source


Demo

 .content{
            width: 630px;
            float: right;
            margin-right: 45px; /* change as per your need */
        }
0


source


You definitely need one div container, otherwise this code won't work with older browsers.

Html

<body>

<div class="container"> 
    <div class="sidebar">

    </div>
    <div class="content">

    </div>
</div>    
</body>

CSS

body{
        margin: 0;
        padding:0;
    }
.container {
    width:1015px;
}
    .sidebar,.content{
        background: #333;
        color: #fff;
        height: 500px;
        border-radius: 4px;
        margin: 20px;
        border:1px solid #777;
    float: left;
    }
    .sidebar{
        width: 300px;

    }
    .content{
        width: 630px;

    }

Check it out: https://jsfiddle.net/blaisemugisha/1hchree0/

0


source


Here you go with a solution

body{
  background-color: lightgray;
}
.container {
  background-color: white;
  width: 800px;
  margin: auto;
  border-radius: 10px;
}

.container .footer {
  background: #4C92FF;
  padding: 10px;
  font-size: 12px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.container .content {
  min-height: 120px;
  margin-left: 1%;
}

.container .content .sidebar {
  width: 200px;
  height:820px;
  float: right;
  background-color: violet;
  border-radius: 2%;

}

.container .header {
  background: #4C92FF;
  height: 80px;
  text-indent: 1%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.maincontent img{
  float: right;
  height: 150x;
  width: 200px;
  margin-right: 1%;
  border-style: solid;
}

.maincontent table, .maincontent td, .maincontent th{
  border-style:double;
  text-align: center;
}

.hitCounter{
  margin-left: 30%;
}

.maincontent{
  text-align: justify;
}
      

        
        
        
      

    
<div class="container">
  <div class="header">
    <h1>Trains in Sri Lanka</h1>
  </div>
  <div class="content">
    <div class="sidebar">
      <h3>Social Profiles</h3>
      <table>
        <tr style="align-content: center">
          <th><a href="https://www.facebook.com" target="_blank"><img src="img/fb.png" style="height: 50px; width: 50px"/></a></th>
          <th><a href="https://www.google.com" target="_blank"><img src="img/g.png" style="height: 50px; width: 50px"/></th>
          <th><a href="https://www.linkedin.com" target="_blank"><img src="img/li.png" style="height: 50px; width: 50px"/></th>
        </tr>
      </table>    
      <hr>
      <h3>Hit Counter</h3>
      <div class="hitCounter">
        <a href='https://freehitcounters.org/' >freehitcounters.org</a> <script type='text/javascript' src='https://www.freevisitorcounters.com/auth.php?id=40ce15186d73fda91d26f71e9ae5cc0169d382b1'></script>
              <script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/425569/t/3"></script>
      </div>

      <hr>
      <h3>Subscribe</h3>
      <div class="subscribeBox">
        <form name="subscriptionForm">
          <input type="email" placeholder="Enter your email address" style="margin-left: 10%"/>
          <input type="submit" value="Subscribe" style="margin-left: 30%"/>
        </form>
      </div>
      <hr>
      <h3>Contact Author</h3>
      <div class="contactBox" style="text-align: center">
        Name:<br> XXX<br>
        <br>
        email:<br> XXX
      </div>
    </div>
    <div class="maincontent">
      <h2>Class M1 Locomotives</h2>
      <img src="img/m1.jpg">
      <p>In the 1950s Sri Lankan railway was seeking replacements for old rolling stock, routine replacement of which had been delayed by World War II. Specifications were for 25 locomotives with 750 hp (559 kW) power at the wheel, available from 12 mph (19 km/h) upwards, and up to an altitude of 6,200 ft (1,900 m). The train was expected to be used for suburban trains centered on Colombo, as well as mail trains in the north of the country, and trains in hill areas: approximately requirements were for a vehicle capable of pulling 550 long tons (560 t; 620 short tons) at 18 mph (29 km/h) on a gradient of 1 in 44 (2.27%) on track with 5-chain (330 ft; 101 m) reverse curves; preferably within a 80 long tons (81 t; 90 short tons) locomotive weight on 6 axles (A1A-A1A). Several firms tendered for the contact; American suppliers were unable to enter a competitive bid due to the devaluation of both the rupee and British pound.</p>
      <hr>
      <h2>Class M2 Locomotives</h2>
      <img src="img/m2.jpg">
      <p>From 1954, several batches of General Motors-manufactured locomotives were imported to Sri Lanka under "The Colombo Plan". Locally called a "Canadian" engine – there are actually two classes of Canadian engine in SLR – the other one is Class M4. Since these engine were imported under grants from the Canadian government, class M2 locomotives are named with Canadian province and city names. The last two locomotives were made in the United States and imported for Cement Corporation, Sri Lanka. But they were later attached to Sri Lanka Railways locomotive fleet. They were named after two local cities – Galle and Kankasanthurei – where the cement factories were located.</p>
      <h4>Sub classes</h4>
      <table>
        <tr> 
          <th>Sub Class</th>
          <th>Weight</th>
          <th>Axel Arrangement</th>
          <th>Year</th>
          <th>No.of Locomotives</th>
        </tr> 

        <tr>
          <td>M2A</td>
          <td rowspan="4">79 Tonnes</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>

        <tr>
          <td>M2A</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>
      
        <tr>
          <td>M2A</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>
      
        <tr>
          <td>M2A</td>
          <td>AIA - AIA</td>
          <td>1959</td>
          <td>3</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="footer">
    © 2017 | Trains in Sri Lanka
  </div>
</div>
Run codeHide result


0


source


Here's a slightly more flexible way to do it with flexbox:

body {
    margin: 0;
    padding:0;
}

.container {
    display: flex;
    flex-direction: row;
}

.sidebar,
.content {
    display: flex;
    flex-direction: column;
    background: #333;
    color: #fff;
    min-height: 500px;
    border-radius: 4px;
    margin: 20px;
    border:1px solid #777;
}

.sidebar {
    flex-grow: 1;
    min-width: 300px;
}

.content {
    flex-grow: 5;
    min-width: 630px;
}
      

        
        
        
      

    
<body>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li>These are list items</li>
                <li>These are list items</li>
                <li>These are list items</li>
                <li>These are list items</li>
            </ul>
        </div>
        <div class="content">
            <h1>Content</h1>
            <p>This is some content</p>
        </div>
    </div>
</body>
Run codeHide result


You can change the amount of free space on the sidebar of the div content by increasing / decreasing the value flex-grow

. Thus, it will automatically resize the screen to different sizes. Then you can also hide the sidebar when the user is on a mobile device, or fold them, whichever you prefer.

0


source


A modern and elegant solution to this problem would be to use CSS Grid.

.container {
  width: 100%;
  display: grid;
  grid-template-areas: "sidebar main";
  grid-template-columns: 200px auto;
}

.sidebar {
  grid-area: sidebar;
  height: 100vw;
  background-color: lightgray;
}

.main {
  grid-area: main;
  height: 100vw;
  background-color: gray;
}
      

        
        
        
      

    
<div class='container'>
  <div class='sidebar'>
    // sidebar content
  </div>
  <div class='main'>
    // main page content goes here
  </div>
</div>
Run codeHide result


0


source






More articles:


All Articles