Using Flexbox for laying out content in both columns and rows

Hey there, I'm looking for a little help. It's been quite some time since I last built a website from scratch and I want to keep things simple this time around. I've used breakpoints before, but I'm curious if Flexbox could be a better option(?). I'm struggling a bit to grasp the concept and apply it to my current code.

My layout consists of two rows at the top for the header and navigation links, followed by two columns below for the main content, and then another row for the footer.

I have included all the content between the body tags in my HTML page (which is still a work in progress) along with the CSS provided below. At the moment, everything is defined in pixels. Any feedback on what I'm doing right or wrong (like using too many containers, etc.) and guidance on how I can utilize Flexbox would be greatly appreciated.

body {
    background-color: #C4C4C4;
    font-family: 'Roboto', serif;
    /*font-size: 48px;*/
    line-height: 25px;
}

#page-container {
    margin: 0 auto;
    width: 793px;
}

header {
    background: url("../images/big-banner.jpg");
    background-size: 793px 285px;
    background-repeat: no-repeat;
    height: 285px;
    /*height: 285px;*/
}

header h1 {
    padding: 70px 0 0 20px;
    color: #FFFFFF;
    font-size: 2.8em;
}

header p {
    padding: 25px 0 0 20px;
    color: #FFFFFF;
    font-size: 1.4em;
}


h2 {
    font-size: 1.4em;
    font-weight: bold;
    padding-bottom: 20px;
}

h3 {
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 20px;
}


p {
    line-height: 1.7;
    padding-bottom: 30px;
}

ul {
    padding-left: 20px;
}

li {
    list-style-type: disc;
    line-height: 2em;
    padding-left: 5px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #605A52;
}

nav li {
    float: left;
    list-style-type: none;
    padding: 0;
}

nav li a {
    display: block;
    color: #FFFFFF;
    text-align: center;
    font-size: 1em;
    padding: 8px 15px 8px 15px;
    text-decoration: none;
}

nav li a:hover {
    color: #000000;
    background-color: #FFFFFF;
}

strong { 
    font-weight: bold;
}

small {
    font-size: 0.9em;
}


section {

}

article {

}

.contact-box {
    height: 200px;
    width: 200px;
    background-color: #FFFFFF;
    padding: 15px;
    -webkit-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
    -moz-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
    box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
}

summary {

}


.content-container {
    width: 793px;
    width: 100%;
    height: 100%;
    display: flex;
}

/* left col */
.left-col {
    padding: 40px 20px 60px 60px;
    width: 450px;
    float: left;
}

/* wull-width left col for contact page */
.full {
    width: 100%;
    padding-right: 40px;
}

/* right col */
.right-col {
    background-color:#FFFFFF;
    width: 243px;
    float: left;
    align-items: stretch;
    height: 100%;
    padding: 40px 20px 10px 20px;
    margin: 10px 0 0 0;
}

.zebra-1, .zebra-2 {
    text-align: justify;
    margin: 10px 0 10px 0;
}

.zebra-1 {
    background-color: #EDEDED;
}

.zebra-2 {
    background-color: #FFFFFF;
}

.list-left, .list-right {
    text-align: left;
    float: left;
    width: 43%;
    padding-right: 5px;
}

footer {
    clear:both;
    background-color: #605A52;
    padding-left: 10px;
    color:#FFFFFF;
}

footer p {
    padding: 10px;
}



                <div id="page-container">

                    <header>
                        <h1>Main title here</h1>
                        <p>Sub title</p>
                    </header>

                    <nav role="navigation">
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                        </ul>
                    </nav>

                    <div class="content-container zebra-1">
                        <section class="left-col" role="main">
                            <h2>Welcome</h2>
                            <p>Lorem ipsum</p>
                            <p>Lorem ipsum</p>
                        </section>

                        <div class="right-col zebra-1" role="complementary">
                            <aside><div class="contact-box">Contact info here</div></aside>
                        </div>
                    </div>



                    <div class="content-container zebra-2">
                        <section class="left-col" role="main">
                            <h2>Another header</h2>
                            <p>Lorem ipsum</p>
                        </section>
                        <div class="right-col zebra-2" role="complementary">
                            <p>More stuff here</p>
                        </div>
                    </div>

                    <footer>
                        <p>
                            <small>Copyright info</small>
                        </p>
                    </footer>

            </div>
htmlcssflexboxmultiple-columns

Answer №1

Here's a helpful tip for you: When using flex, you don't have to specify the width of the left and right columns or use float.

To understand how flex works, try the following:

Firstly, add the necessary flex declarations for various browsers:

.content-container {
    width: 793px;
    width: 100%;
    height: 100%;

        display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-flow: wrap;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
}

Next, make changes to your left and right columns:

/* left col */
.left-col {
    padding: 40px 20px 60px 60px;

        flex: 0 0 25%;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
}

/* right col */
.right-col {
    background-color:#FFFFFF;
    align-items: stretch;
    height: 100%;
    padding: 40px 20px 10px 20px;
    margin: 10px 0 0 0;

        flex: 0 0 25%;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
}

Experiment with changing the percentage values to further grasp the concept!

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

Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

I am struggling with Bootstrap 4.1 as I try to align content to the right side. Specifically, I have a Navigation Bar that triggers a Modal Dialog containing Tabs. The dropdown menu on the far right of the Tab is what I want to justify to the right. Here a ...

javascriptjqueryhtmlcssbootstrap-4

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu

What steps should I take to design and implement this basic search form?

Essentially, I have a three-page setup: - One page containing all possible search results such as: 'search result 1' 'search result 2' 'search result 3' - Another page with a search form and enter button. - And finally, a res ...

phpjavascriptjqueryhtml

What is the best way to ensure my dropdown menu closes whenever a user clicks anywhere on the page? (javascript)

I have created a dropdown that appears when the user clicks on the input field, but I would like to remove the active class so that the dropdown disappears if the user clicks anywhere else on the page. Here is my code snippet: // drop-down menu functi ...

javascripthtmldrop-down-menulogic

After incorporating some movement effects into my menu, suddenly none of the buttons were responding

While working on my website and trying to add a close menu button, I encountered an issue where all the menu buttons stopped functioning. Here is the HTML code snippet: <div id="openMenuButton"> <span style= "font-size:30px;cu ...

javascripthtmlcss

The HTML slideshow is not automatically showing up as intended

I need to make a few adjustments to the picture slideshow on my website. Currently, all the pictures are displayed at once when you first visit the site, and it only turns into a slideshow when you click the scroll arrows. I want it to start as a slideshow ...

javascripthtml

The input field must only accept numbers with decimal points

I have developed a dynamic HTML table that includes various input controls. I am looking to restrict input to only decimal values with two digits after the point. For example: 1111.22 , 44445454.33 Here is the HTML code snippet: <div id="divdynam ...

htmljquery

The magic of CSS Pseudo-classes in Inline Styling

For the longest time, I've been under the impression that you cannot include in-line :hover{..} styles to an element. However, recently I stumbled upon this page which showcased examples like this. <a href="http://www.w3.org/" s ...

htmlcss

What could be causing the issue of node-sass generated CSS files not loading on the initial GET request?

I've set up a node express app and incorporated sass support for the CSS. However, when I attempt to access http://myhost.com:port/css/whatever.css, the whatever.css file is generated in the express_app_root/public/css directory as expected. The *.scs ...

cssnode.jsweb-applicationsexpresssass

Enable a single column to scroll until the content is fully displayed, and then stay in a fixed position

My HTML content consists of two columns, with the first column being a sidebar that should have limited content. The second column holds the main content and can span several pages. The desired functionality is for the first column to scroll until the end ...

htmlcss

Tips for arranging files within a directory in Netbeans IDE

I prefer to centralize all CSS files in a single folder for easy access. Below is the path of my CSS directory: css/sampl.css. Here, css represents the folder. This is the code snippet I am using: <link href="/CSS/sampl.css" rel="stylesheet" type="te ...

javacssjspurlnetbeans

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...

javascriptjqueryhtmlcss

Utilizing objects from a JSON file within an HTML document

I'm currently in the process of creating a comprehensive to-do list, and I want to establish a JSON file that will link all the items on the list together. Despite my efforts, I find myself uncertain about the exact steps I need to take and the speci ...

javascripthtmlarraysjsonobject

Generate an HTML table dynamically from a PostgreSQL query

I am facing a challenge that may be simple for experienced individuals but is proving to be difficult for me as a newbie. The task at hand involves retrieving JSON data from a database query and displaying it in an HTML table using Node.js, Express, and Po ...

htmljsonpostgresqlexpress

Equalizing column heights in Bootstrap layouts

It seems like a straightforward issue, but I'm having trouble finding a solution. I am utilizing Bootstrap5 for this project. You can find the complete code here : Due to some problems with Codeply, I have also uploaded it on jsfiddle. https://jsf ...

htmlcssbootstrap-5

Executing a JavaScript function from one page on a separate webpage

I am trying to link three pages together: dashboard.html, documents.jsp, and documents.js In the dashboard.html file, I have a hyperlink that should take the user to documents.jsp and also trigger a function in the documents.js file, which is included in ...

jqueryhtmlajax

Is it necessary to convert an HTMLCollection or a Nodelist into an Array in order to create an array of nodes?

Here we go again with the beginner guy. I'm working on this exercise from a book called "Eloquent JavaScript". The goal is to create a function similar to "getElementByTagName". However, the first function below is not returning anything and the secon ...

javascripthtmlcss

What is the best way to design a shape (a quadrilateral with rounded edges) using CSS?

Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to contr ...

htmlcssreactjssvgcss-shapes

Display "Temporary Text" in an HTML drop-down list if no selection is made

Is there a way to ensure that the placeholder in an existing select element always remains visible? I noticed that when I select an option and then go back to the blank item, the placeholder disappears. How can I make sure it is always displayed when no ...

htmljquery

How can I utilize PHP to generate several tables within a single database?

I need some guidance on creating multiple tables within the "new" database. I'm curious if it's possible to include PHP code inside the query to generate table names dynamically. Any help would be greatly appreciated. Thank you in advance. <? ...

phphtmlmysqlmysqli