I need assistance in constructing a CSS layout.
The HTML structure is as follows:
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
Could someone provide help on creating the necessary css classes?
Edit1: Both Header and Main content should occupy full screen height.
.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>Click to run this code snippet and see an example layout to get you started.
Note: By setting a height of 100vh, the div will match the size of your screen. Further details can be found here: Make div 100% height of browser window
Consider an alternative method:
http://jsfiddle.net/austinthedeveloper/kk3ywj2x/
A clever trick is to utilize calc instead of vh units. Just bear in mind that this only works on IE 10 and newer versions.:
.header {
height: 120px;
}
.content {
height: calc(100% - 120px);
}
This technique allows for fixed heights on elements such as headers and footers. It pairs well with SASS as the heights can be easily adjusted using variables.
For elements that may overflow, add the following:
.right {
overflow-y: auto;
}
If you always want the scrollbar visible, change it to scroll.
I am just starting to learn about angular.js and I'm wondering how to add a text area when clicking on an image. ....... ..... ..... </thead> <tbody> <tr ng-repeat="stu in Studentlist"> <td>{{stu.rollno}}</td> <td> ...
I've been experimenting with creating a grid layout where the bottom image will move up until it is 10px away from the image directly above it. However, no matter what I attempt, the spacing seems to be based on the tallest image rather than the one a ...
Incorporating digest authentication and noticing mention of "entity-body" in the document for auth-int authentication. Is this referring to the HTML header and body, or just the HTML header section? For more information on digest authentication, check out ...
This piece of code is responsible for generating the back and next links on my Wordpress website. function.php " class=""> <?php if ( is_single() ) : // navigation links for single posts ?> <?php next_post_link( '<div class=" ...
I am still learning AngularJS and could use some assistance. In my application, I have a table with the following information <table> <tr> <th><span ng-click="sortType = 'first_name'; sortReverse = !sortReverse">Refer ...
Trying to include HTML tags in a popover setAttribute() function within Bootstrap 5, but the tags are displayed as content rather than being applied as attributes. <button type="button" class="btn btn-secondary mx-2" data-bs-containe ...
Currently, I am working on coding in a .php file using html. This is the snippet of code that I have: <html> <tr> <td>Hi<td> <td>Test<td. </tr> </html> I'm trying to add an href to ...
Is there a way to align the company logo div next to the name, address, email, and phone number containers? I've attempted using display: inline and float: right, but the logo isn't moving up as desired. Here's the code snippet: http://jsfi ...
I have been searching for a solution in the community forums, and the closest answer I found was in the thread titled "trying-to-post-date-via-php-with-mysql-need-help" My issue involves a form with 2 input fields - one for date selection using an HTML5 p ...
Context and Issue I am currently working on this specific page, with a focus on the "Top Artists" section. Desired Outcome: When viewed from a laptop, I aim for the cards to be displayed as vertical rectangles, where the ranking is at the top, followe ...
Below is the HTML and Javascript code I am working with: <noscript> <div id="player"> <h2>Warning! You should enable your JavaScript!</h2> </div> </noscript> <script type="text/javascript"> var vid ...
At the top of a mobile page, I have implemented two search boxes: https://i.sstatic.net/gCfOG.png When a user clicks inside one of the boxes, the desired behavior is as follows: The selected box expands The other box collapses horizontally A close ico ...
Two <a></a> tags contain the onclick event and PHP code to switch between months. Here are the links: <a href="javascript:void(0);" onclick="getCalendar('calendar_div','<?php echo date("Y",strtotime($date.' - 1 Month" ...
I have a question that may seem trivial to experienced web developers - what exactly is "shape-id"? For example, in the code <hr shape-id="2">. I'm currently attempting to change the color of the horizontal lines (hr) on my website, but I can& ...
In order to create a website that is responsive, I choose to disable certain content in the mobile versions (or add content in the desktop/tablet version). By disabling this content, I can eliminate the need for including specific javascript files. This wi ...
I have a specific requirement for the year input in my HTML form. The year must be entered in the following format: YYYY OR YYYY/YYYY/YYYY/YYYY/YYYY ...etc. Here is my pattern: First test : pattern="^((19)\d{2}\/|(20)[0-1][0-9]\/)+" Sec ...
In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...
I'm currently working on creating an RTL version of the website, but I'm encountering a challenge with a specific layout: .content { width: 200px; } .content.rtl { direction: rtl; text-align: right; } <h5 class="content"> <sp ...
Upon clicking the parent button, a class within its child element will toggle to show or hide. If the child element is selected, a loading animation will appear for a brief moment before reverting back to its original hidden state. I attempted to achieve ...
As a newcomer to nodejs, I am currently working on a project where I need to connect to elasticsearch using nodejs, fetch and manipulate data from it, and then insert the modified data into an html file. However, I'm struggling with the fact that html ...