Announcement

Collapse
No announcement yet.

Using Columns in CSS - Help!

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Using Columns in CSS - Help!

    I'm trying to figure out the best way to establish a grid in web design and make it responsive. I've tried CSS Grid and had some issues, now I'm establishing columns and their percentages and link to a column by using a div class. One of the attached screenshots shows three separate elements that are set to the column that has a width of 33.3%. Why aren't they all on one line together? Why does the third element drop down to the next line?

    I've also attached a screenshot of my HTML and CSS.
    jessecookedesign.com

  • #2
    First, the div in your head section should be in the body section. That's not what's causing your problem, but it still needs to be fixed.

    Second, the problem you're having has to do with other elements in the container div that take up extra horizontal space. Both the widths of the red borders and the div padding add space. Since you've styled each column div to 33.3%, this leaves no room left over for the borders and the padding, so the last div gets wrapped.

    In my opinion, padding shouldn't be added to total width, but that's the way the W3C set it up. Luckily, there's an easy way around both it and the border problem. In your CSS add box-sizing: border-box; as a line immediately beneath border: 1px solid red;.

    Comment


    • #3
      A good way to make a grid with css nowadays is to use css-grids.

      https://developer.mozilla.org/en-US/...SS_Grid_Layout

      Comment


      • #4
        Like B mentions take the <div> tag out of the <head> and leave the <link> tags. Pull the h1 and h2 out also. Add a viewport meta for responsive. I used flex properties for your col-4s at 33.3% and added a <div> container ... and through together this code which could use a touch up or two (I'm in FF dev environment) ...whatever.

        --------------------------------------------------------------------------

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <title>Jesse Cooke Design</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Titillium+Web:900" rel="stylesheet">
        <style>
        h1, h2 {
        font-family: 'Titillium Web', sans-serif;
        margin: 0px;
        }
        .container {
        position: relative;
        display: flex;
        flex-direction: row;
        }
        .col-4 {
        box-sizing: border-box;
        padding: 0 15px;
        border: 1px solid red;
        width: 33.3%;
        margin: 5px;
        }
        </style>
        </head>
        <body>
        <h1>Name here</h1>
        <h2>Title here</h2>
        <div class="container">
        <div class="col-4">Hello</div>
        <div class="col-4">Hello</div>
        <div class="col-4">Hello</div>
        </div>
        </body>
        </html>

        ------------------------------------------------------------------------

        Hope that helps.

        If you want to use CSS Grid check out everything Rachel Andrew, including;

        https://gridbyexample.com/
        https://rachelandrew.co.uk/

        Flex is just as good with fall backs as is Grid ... or use both!
        Last edited by bigdata; 12-09-2017, 03:07 AM.

        Comment

        Search

        Collapse

        Sponsor

        Collapse

        Incredible Stock

        Latest Topics

        Collapse

        GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
        Working...
        X