How to create a very simple 2 column website?

Question

0.00/5 (No votes)

See more:

I am trying to code a landing page that doesn't scroll and just has two columns. The left column is 40% and has text, the right column is obviously 60% and has an image and both columns are 100% high and always fit to the size of the browser until mobile or <600px wide, I would stack them.

What I can't figure out how to do is get the two columns to be 100% height and be responsive to the browser width/height and remove the ability to scroll.

A perfect example is thehustle.co although theirs doesn't appear to be two columns, you get the idea.

I don't know if I'm on the right track and am by no means an expert at html/css. Hoping someone can help me out or point me to a good YouTube video.

Thanks!

What I have tried:

I have tried <div class ="split left" and <div class ="split right" with the following CSS below.

CSS

.splt {
	height: 100%;
	width: 40%;
	position: fixed;
	z-index: 1;
	top: 0;
	overflow-x: hidden;
	padding-top: 20px;
}

.left {
	left: 0;
	background-color: #fff
}

.right {
	right: 0;
	background-color: #000
}

Posted 20-Mar-18 10:12am

trevorscottt

Updated 20-Mar-18 11:22am

Patrice T

v6

Add a Solution

2 solutions

Solution 2

You also can use bootstrap

Here is an example:

cp_full_height - JSFiddle[^]

full code:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <style>
        .fill {
            height: 100vh;
        }

        .leftBgColor, .rightBgColor {
            height: 100vh;
            background: red;
        }

        .rightBgColor {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container-full fill">
        <div class="row">
            <div class="col-sm-4 leftBgColor">
                40%
            </div>
            <div class="col-sm-8 rightBgColor">
                60%
            </div>
        </div>
    </div>
</body>
</html>

Posted 20-Mar-18 11:23am

Bryian Tan

Comments

Richard Deeming 21-Mar-18 15:01pm

Except 4/12 isn't 40% - it's 33.3333333...% :)

Also, AFAIK Bootstrap 4 uses Flexbox to implement the grid, so the browser support is the same as using Flexbox directly.

Bryian Tan 21-Mar-18 16:07pm

Thanks for sharing :). good stuff

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2018-03-20T11:07:00

Solution 1

So long as you can drop support for IE10 and earlier, you can use Flexbox to do this very easily:

CSS

@media (min-width: 600px) {
  html,
  body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  body {
    display: flex;
  }
  .left,
  .right {
    padding: 10px;
  }
  .left {
    width: 40vw;
    background-color: #eff;
  }
  .right {
    flex-grow: 1;
    background-color: #ffe;
  }
}

Demo[^]
Basic concepts of flexbox - CSS | MDN[^]
A Complete Guide to Flexbox | CSS-Tricks[^]
Can I use... Flexbox[^]

Posted 20-Mar-18 11:07am

Richard Deeming

Comments

trevorscottt 20-Mar-18 17:14pm

Wow, thanks! That looks like it did exactly what I was looking for. As far as the columns stacking on top of each other... On mobile, can I choose for the column on the right to stack first and have the background colors change a little bit? When collapsed on top of each other, I would essentially want 3 rows with altering color.

ex. (grey background with image on top, white background with some text, grey background with some more text)

I'm not sure what the easiest route for this would be.

Richard Deeming 21-Mar-18 14:59pm

If you just want to swap the order of the columns on smaller screens, you can swap the order of the <div>s and use flex-direction:row-reverse; - Demo[^]

Changing the background colours is also easy: specify the "small screen" colours in a rule before the @media (min-width: 600px) block: Demo[^]

If you want to split one of the columns to "top-and-tail" the other at smaller screen sizes, that's somewhat more complicated.