CODEWITHSUNDEEP
htmlcss
leonardorame
leonardorame

Reputation: 1161

CSS layout design

I want to create this CSS layout.

Layout

The div structure is this:

<div class="header"></div>
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

Can anyone help me to create the css classes needed?.

Edit1: Header + Main content should fill screen height.

Upvotes: 0

Views: 122

Answers (2)

austinthedeveloper
austinthedeveloper

Reputation: 2601

Here's an alternate approach:

http://jsfiddle.net/austinthedeveloper/kk3ywj2x/

The secret is to use calc instead of vh. Just make sure that you know that this only supports IE 10 and up.:

.header {
    height: 120px;
}
.content {
    height: calc(100% - 120px);
}

This allows for a fixed height on things like the header and footer. This approach works great when paired with SASS since the heights would be variables that can be changed easily.

Areas that overflow will need to have this attached:

.right {
    overflow-y: auto;
}

You can change this to scroll if you always want the scrollbar there.

Upvotes: 1

AboutTime
AboutTime

Reputation: 317

.header {
  background-color:brown;
  height:10vh;
}
.content {
  height:90vh;
}
.left {
  width:25%;
  height:100%;
  background-color:#AAAAFF;
  float: left;
  overflow: scroll;
}
.right {
  width:75%;
  height:100%;
  background-color:#FFAAAA;
  float: right;
  overflow: hidden;
}
<div class="header"><p> HELLO I AM A HEADER </p></div>
<div class="content">
  <div class="left"><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p></div>
  <div class="right"><p> SOME MAIN CONTENT IN HERE! </p></div>
</div>

Run this code snippet to see an example, here is a very basic layout to get you started.

Edit: setting a height of 100vh will create a div that equals the size of your screen. You can read up on it here: Make div 100% height of browser window

Upvotes: 3

Related Questions