How to spread three columns in CSS across a page equally


Tags: html,css

Problem :

So I have looked at other questions on SE and from Google results but either they are too duct tape-y (using magic numbers, i.e. X amount of pixels in margin or padding or whatever, which I don't like cause it's not scalable) or using methods that someone in some other search result says I shouldn't unless as a last resort (like float: left) or they are doing things I have done but which for whatever reason don't work.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GDb</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen">    
</head>
<body>
    <header>
        <nav>
            <ul class="NavBanner">
                <li><a class="Activatable" href="Home.html">Home</a></li>
                <li><a class="Activatable" href="#">Search</a></li>
                <li><a class="Active" href="#">Browse</a></li>
            </ul>
        </nav>
    </header>

    <div class="MainContent">
        <div class="Column">
            <div class="TextContainer">
                <h1>By Genre</h1>
                <h2>Action</h2>
                    <div>
                        <ul>
                            <li>Rainbow Six: Siege</li>
                        </ul>
                    </div>
                <h2>Adventure</h2>
                    <div>
                        <ul>
                            <li>Sunless Sea</li>
                            <li>Alien: Isolation</li>
                        </ul>
                    </div>
                <h2>Strategy</h2>
                    <div>
                        <ul>
                            <li>
                                Stellaris
                            </li>
                        </ul>
                    </div>
                <h2>RPG</h2>
                    <div>
                        <ul>
                            <li>
                                The Witcher 3: Wild Hunt
                            </li>
                        </ul>
                    </div>
            </div>
        </div>

        <div class="Column">
            <div class="TextContainer">
                <h1>By Developer</h1>
                <h2>CD Projekt RED</h2>
                    <div>
                        <ul>
                            <li>
                                The Witcher 3: Wild Hunt
                            </li>
                        </ul>
                    </div>
                <h2>Creative Assembly</h2>
                    <div>
                        <ul>
                            <li>Alien: Isolation</li>
                        </ul>
                    </div>
                <h2>Failbetter Games</h2>
                    <div>
                        <ul>
                            <li>Sunless Sea</li>
                        </ul>
                    </div>
                <h2>Paradox Interactive</h2>
                    <div>
                        <ul>
                            <li>
                                Stellaris
                            </li>
                        </ul>
                    </div>
                <h2>Ubisoft</h2>
                    <div>
                        <ul>
                            <li>Rainbow Six: Siege</li>
                        </ul>
                    </div>
            </div>
        </div>

        <div class="Column">
            <div class="TextContainer">
                <h1>By Year</h1>
                <h2>2016</h2>
                    <div>
                        <ul>
                            <li>Stellaris</li>
                        </ul>
                    </div>
                <h2>2015</h2>
                    <div>
                        <ul>
                            <li>Rainbow Six: Siege</li>
                            <li>Sunless Sea</li>
                            <li>The Witcher 3: Wild Hunt</li>
                        </ul>
                    </div>
                <h2>2014</h2>
                    <div>
                        <ul>
                            <li>Alien: Isolation</li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

body
{
    background: -webkit-linear-gradient(top, #b3b3b0, #e3e2dd);
    background-color: #b3b3b0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
}

.NavBanner
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.Activatable
{
    color: white;
    text-decoration: none;
    padding: 14px 16px;
    float: left;
    text-align: center;
}

.Activatable:hover:not(.active)
{
    background-color: #111;
}

.Active
{
    background-color: #4CAF50;
    color: white;
    cursor: default;
    text-decoration: none;
    padding: 14px 16px;
    float: left;
    text-align: center;
}

.MainContent
{
    background-color: whitesmoke;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.7);
    padding: 56px 14px 15px;
    width: 1700px;
    margin: auto;
    position: relative;

}

.Column
{
    text-align: center;
    border: 1px solid #000;
    padding: 10px;
    margin: 0 10px;
    display: inline-block;
    width: 500px;
    vertical-align: top;
}

.TextContainer
{
    display: inline-block;
    text-align: left;
}

I almost have the desired result, but there is more space on the right of the right column than on the left of the left column as the columns aren't centered. I don't really care about the width or specific margin, padding or whatever of the columns, I just want them to be the same width and to be centered, if that makes sense.



Solution :

you may use flex :

You can simply test adding these 2 rules to your style sheet: (snippet below to see by yourself :) )

.MainContent {
  display: flex;
}

.Column {
  flex: 1;
}

body {
  background: -webkit-linear-gradient(top, #b3b3b0, #e3e2dd);
  background-color: #b3b3b0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
}

.NavBanner {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.Activatable {
  color: white;
  text-decoration: none;
  padding: 14px 16px;
  float: left;
  text-align: center;
}

.Activatable:hover:not(.active) {
  background-color: #111;
}

.Active {
  background-color: #4CAF50;
  color: white;
  cursor: default;
  text-decoration: none;
  padding: 14px 16px;
  float: left;
  text-align: center;
}

.MainContent {
  background-color: whitesmoke;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7);
  padding: 56px 14px 15px;
  width: 1700px;
  margin: auto;
  position: relative;
  display: flex;
}

.Column {
  text-align: center;
  border: 1px solid #000;
  padding: 10px;
  margin: 0 10px;
  flex: 1;
  vertical-align: top;
}

.TextContainer {
  display: inline-block;
  text-align: left;
}
    <nav>
            <ul class="NavBanner">
                <li><a class="Activatable" href="Home.html">Home</a></li>
                <li><a class="Activatable" href="#">Search</a></li>
                <li><a class="Active" href="#">Browse</a></li>
            </ul>
        </nav>
    </header>

    <div class="MainContent">
        <div class="Column">
            <div class="TextContainer">
                <h1>By Genre</h1>
                <h2>Action</h2>
                    <div>
                        <ul>
                            <li>Rainbow Six: Siege</li>
                        </ul>
                    </div>
                <h2>Adventure</h2>
                    <div>
                        <ul>
                            <li>Sunless Sea</li>
                            <li>Alien: Isolation</li>
                        </ul>
                    </div>
                <h2>Strategy</h2>
                    <div>
                        <ul>
                            <li>
                                Stellaris
                            </li>
                        </ul>
                    </div>
                <h2>RPG</h2>
                    <div>
                        <ul>
                            <li>
                                The Witcher 3: Wild Hunt
                            </li>
                        </ul>
                    </div>
            </div>
        </div>

        <div class="Column">
            <div class="TextContainer">
                <h1>By Developer</h1>
                <h2>CD Projekt RED</h2>
                    <div>
                        <ul>
                            <li>
                                The Witcher 3: Wild Hunt
                            </li>
                        </ul>
                    </div>
                <h2>Creative Assembly</h2>
                    <div>
                        <ul>
                            <li>Alien: Isolation</li>
                        </ul>
                    </div>
                <h2>Failbetter Games</h2>
                    <div>
                        <ul>
                            <li>Sunless Sea</li>
                        </ul>
                    </div>
                <h2>Paradox Interactive</h2>
                    <div>
                        <ul>
                            <li>
                                Stellaris
                            </li>
                        </ul>
                    </div>
                <h2>Ubisoft</h2>
                    <div>
                        <ul>
                            <li>Rainbow Six: Siege</li>
                        </ul>
                    </div>
            </div>
        </div>

        <div class="Column">
            <div class="TextContainer">
                <h1>By Year</h1>
                <h2>2016</h2>
                    <div>
                        <ul>
                            <li>Stellaris</li>
                        </ul>
                    </div>
                <h2>2015</h2>
                    <div>
                        <ul>
                            <li>Rainbow Six: Siege</li>
                            <li>Sunless Sea</li>
                            <li>The Witcher 3: Wild Hunt</li>
                        </ul>
                    </div>
                <h2>2014</h2>
                    <div>
                        <ul>
                            <li>Alien: Isolation</li>
                        </ul>
                    </div>
            </div>
        </div>
    </div>


    CSS Howto..

    How to make scrollable table's header fixed using css fixed position property?

    How to remove unwanted whitespace css/html

    How to edit CSS styles in JavaScript?

    How do I get this CSS to work in safari

    How to overide all css style classes in an input field without effecting other elements?

    How to Make
    • as structured

    css how to define a class for table to control the style of table rows

    How to apply CSS to table cell depending on conditions

    CSS: How to float 3 divs side by side for width:100% without messing up?

    how would i get the headline to fade in and move up very slightly on page load with css

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    How to make nested divs appear as siblings with CSS?

    How can i add a css rule for this code?

    How to apply multiple css radial gradients to a single element

    How can I show a loading screen while a really large image is loading?

    How to wrap a DIV around a DIV with CSS

    How do I remove the gap between div tags?

    How to arrange dissimilar
    elements to flow inline inside an
    element

    Text and image in div - How to align correctly?

    How can I make a border wrap around a group of pictures?

    How to match a comment node with the Jsoup selector api?

    960 CSS Framework, how to get full 960 width?

    How to style differently only the first list item from unsorted list

    How to create an highlight animation when a control gets focused [closed]

    How to set element in css at fixed position

    How to exclude the container from this javascript code?

    How to close CSS3 Lightbox by clicking outside of the current image?

    How to change colour of Bootstrap scroll spy and why won't my logos resize?

    How do I get the ID of a JQuery item mid-function?

    How do I remove white space INSIDE CSS border? I want the border to be tight around the text