Creating a visually appealing website layout using HTML and CSS to align DIV

Question

Creating a visually appealing website layout using HTML and CSS to align DIV

I'm having trouble with the CSS aspect of my portfolio website design. I'm trying to create a layout like this:

Here's what I have so far:

body {
  margin: 0;
  padding: 0;
}
.menu {
  height: 100vh;
  width: 380px;
  background-color: #5B91AC;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 10px;
}
.menu img {
  width: 100%;
}
.container {
  position: relative;
  left: 400px;
  width: 100%;
  background-color: yellow;
  padding: 20px 10px;
}
.content {
  max-width: 768px;
}

<body>
  <!-- Start of menu (at left side) -->
  <div class="menu">
    <img class="logo" src="http://placehold.it/788x208" />
  </div>
  <!-- End of menu -->

  <div class="container">
    <div class="content">

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

http://jsfiddle.net/gv19a3mw/1/

Can anyone give me some guidance or assist me with my CSS issues?

html css alignment

Answer 1

Answer №1

Here is a helpful guide on achieving your desired outcome: Demo Pen

*{
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.menu{
  height:100vh;
  width: 25%;
  background-color: #5B91AC;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 10px;
}
.menu img {
  width: 100%;
}
.container {
  width: 75%;
  background-color: #bdc3c7;
  padding: 20px 10px;
  margin: 0 0 0 25%;
  float: left;
}
.content {
  /* max-width:768px */;
  background-color: #ecf0f1;    
}

Answer 2

Here is a helpful guide on achieving your desired outcome: Demo Pen

*{
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.menu{
  height:100vh;
  width: 25%;
  background-color: #5B91AC;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px 10px;
}
.menu img {
  width: 100%;
}
.container {
  width: 75%;
  background-color: #bdc3c7;
  padding: 20px 10px;
  margin: 0 0 0 25%;
  float: left;
}
.content {
  /* max-width:768px */;
  background-color: #ecf0f1;    
}

Creating a visually appealing website layout using HTML and CSS to align DIV

Answer №1

Similar questions

How to show table cell value in Angular 4 using condition-based logic

Incorporating a new row in JQuery Datatable using an mdata array

Two-column dropdowns without the use of tables

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

Web view that remains fixed regardless of resolution, compatible with both iPhone and iPhone4 devices

A guide to showcasing JSON data on a webpage using JavaScript

Elements styled as inline blocks with static dimensions, irregular in size

Rotate each row of the table in sequence with a pause between each flip

Using the jQuery/JavaScript operator is similar to the SQL LIKE query with the wildcard %

Maximizing the potential of Bootstrap slider within OpenCart

Exploring a GitHub image repository with HTML loops

Resolving issues with JavaScript caused by Polymer updates

Adjusting the iframe for a side navigation with multiple dropdown options

View the picture directly on this page

What is the best way to make text appear as if it is floating in Jade or HTML?

Elements on the page appear and disappear as you scroll down

The margins are misaligned on a tablet-sized device due to an issue with the media

Are Your Padding Styles Missing?

Search for "conditions" in a basic HTML DOM parser

JQuery form not triggering the submit event