Reaching for a particular design, yet ending up with something unexpected

I need some help achieving a specific layout for my website. Every time I try to do it, everything gets all jumbled up. I want it to look like the example image I have attached. Can anyone provide assistance?

body {
          margin: 0px;
        }

        .top {
          width: 100%;
          background-color: blue;
          height: 40px;
          color: white;
        }

        .content {
          margin-left: 100px;
          height: 100%;
        }

        .sidebar {
          width: 100px;
          position: fixed;
          height: 100%;
          background-color: red;
        }

        .footer {
          height: 40px;
          width: 100%;
          background-color: black;
        }
<div class="sidebar"></div>

        <div class="content">
          <div class="top">My website example</div>

          <p>I start here</p>
        </div>

        <div class="footer"></div>
htmlcss

Answer №1

It appears that you were just missing a few components in your footer design. To ensure that it is positioned correctly, consider utilizing position: absolute or position: fixed, similar to how you implemented it for your sidebar. Additionally, include bottom: 0 to specify that the footer should be located at the bottom rather than the top or sides.

body {
  margin: 0px;
}

.top {
  width: 100%;
  background-color: blue;
  height: 40px;
  color: white;
}

.content {
  margin-left: 100px;
  height: 100%;
}

.sidebar {
  width: 100px;
  position: fixed;
  height: 100%;
  background-color: red;
}

.footer {
  height: 40px;
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0;
}
<div class="sidebar"></div>
<div class="content">
  <div class="top">My website example</div>
  <p>
    I start here
  </p>
</div>
<div class="footer"></div>

Answer №2

Implementing flexbox layout

<section>
  <div class="sidebar">
   
  </div>
  <div class="content">
    <div class="top">An Example of My Website</div>
    <p>
      This is where it all begins
    </p>
  </div>
</section>

<div class="footer"></div>

section {
  display: flex;
 height:100vh;
}

.sidebar {
  width: 100px;
  background-color: red;
}
.content{
  width:100%;
}
.top {
  background-color: blue;
  height: 40px;
  color: white;
}


.footer {
  height: 40px;
  width: 100%;
  background-color: black;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The navigation menu is stuck and will not toggle

I'm having trouble getting the button to toggle the nav bar to work properly. I've gone through similar questions and checked my html, but still can't figure out the issue. Any help would be greatly appreciated! Although I can see all the l ...

htmlbuttonnavigationbartogglebutton

Preserve input values after form submission in <?php> code block

I would like to retain form values after submission. I have come across some techniques that claim to do just that: However, when I try to run the HTML file, I encounter two issues: firstly, the code does not function as intended and secondly, PHP snippet ...

phphtmlforms

Revamp Child Relationship in Ruby on Rails Form

One of the challenges I'm facing is with editing and updating priorities for parent accounts in my application. The "Accounts" model acts as the parent, while the "Priorities" model serves as the child. Creating new priorities for these accounts is s ...

htmlruby-on-railsformsassociationsparent-child

Adjust the positioning of two divs on mobile devices

My website has two main divs, one on the left and one on the right. The left div is styled with the classes: col-md-3 left_side And the right div with: col-md-9 right_side In the CSS file, the left_side and right_side classes only have padding, without a ...

htmlcsstwitter-bootstrapcss-floatbootstrap-4

Dealing with the challenge of JavaScript's Undefined problem when working with a

I am having some trouble populating a table with data from a JSON string. Here is the code snippet I am using: tr = "<tr><td>" + data[i]["code"] + "</td><td>" + data[i]["codeDesc"] + "</td></tr>"; However, when I run t ...

javascripthtmlajax

The height of the Bootstrap Vue Carousel is not adjusting properly to the full screen size

I am currently utilizing Bootstrap Vue to design a carousel on my website. The carousel consists of 3 images that users can cycle through. I have successfully tailored the display of the images to fit the height and width of my laptop screen size. However, ...

htmlvue.jsbootstrap-4carouselbootstrap-vue

passing a PHP variable through an HTML form

I've been tasked with modifying a website that I didn't originally create and don't have full access to (I can add HTML scripts but not much more). My current objective is to integrate a form that will send data to a third-party servlet. Wi ...

phphtmlforms

@Output not sending all necessary information to parent component

I'm facing an issue with my @Output() in Angular. When a button is clicked, the function doesn't seem to be working properly between two components. Despite being able to see a response in the console, the functionality isn't behaving as exp ...

htmlangular

Problems Arising with Javascript Animation Functionality

I've created a script for an interactive "reel" that moves up or down when clicking on specific arrow buttons. However, I'm encountering two issues: 1) The up arrow causes it to move downward, while the down arrow moves it upward. 2) After exe ...

javascripthtmlcssanimation

arrangement of rows and columns within Bootstrap 3 framework

I am attempting to display the name 'test' three times in a row and three times in the second row, but it is not appearing horizontally as intended. Instead, everything is displaying in a vertical column pattern... <head> <meta ch ...

htmlcsstwitter-bootstrap-3bootstrap-modalbootstrap-4

I'm having trouble understanding why I'm getting an error when trying to link CSS or SCSS

<link rel="stylesheet" type="text/css" href="scss/styles.scss"> <link rel="stylesheet" type="text/css" href="css/styles.css"> /*webpackconfig.js*/ var path = require("pat ...

javascripthtmlcssnode.jswebpack

Using C:OUT tag within the value attribute of an HTML:OPTION element in a nested

<html:select property = "xyz"> <c:forEach var="xyzValue" items="${requestScope.xyzSet}"> <html:option value="<c:out value='${xyzValue}'/>"><c:out value='${xyzValue}' /></html:o ...

htmljspel

Is the position relative malfunctioning when using display table-cell?

I have designed a horizontal menu consisting of buttons that I want to resize in width so that together they occupy 100% of the menu container. I need them to function like TD elements inside a TABLE. Here is the code snippet I have developed: <div id ...

htmlcss

Is it possible to invoke the same function twice on HTML5 Canvas?

I'm feeling overwhelmed as a beginner with HTML 5 canvas. I'm struggling with this particular function: function drawcircle(x,y) { context.save(); context.strokeStyle = '#00ff00'; context.fillStyle = '#000000'; ...

javascripthtmlfunctioncanvas

Creating CSS to wrap two columns for the main content and menu bar

I'm looking to create a menu bar that aligns on the right side of the page and allows the main content to flow underneath it. While using float:right; in CSS accomplishes this for desktop viewing, on mobile devices the menu bar appears above the conte ...

htmlcss

What is the best method to align these images in the center of this div?

Struggling to center the images inside the div...any suggestions? I know it's basic, just getting back into it. Hopefully someone understands what I'm trying to achieve here? Tryin' to get those images centered in the div but can't fig ...

htmlcssimagecentering

Identifying the class of a clicked button using Jquery

Currently, I am experiencing an issue with my code $(document).ready(function(){ $(".follow-button").click(function(){ alert("asdf"); } }); <button class="follow-button" align="right" align="center"> Follow </butt ...

javascriptjqueryhtml

Utilizing AngularJS to dynamically apply CSS classes based on the $index value

Is there a way to style my div based on the ng-repeat index, applying different styles for odd and even rows? The row with an even index should have all classes specified for the odd one plus additional classes. Controller: var odd = { 'class1&apos ...

javascriptcssangularjs

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

htmlcsssvg

Top method for determining available space for images positioned randomly within a specified area

Currently, I am utilizing HTML's Canvas tag to design a word cloud that is randomly generated. My main focus is on finding the most effective way to determine where there is sufficient blank space within a specified area to accommodate a word. At the ...

javascripthtmlcanvas