No announcement yet.

Using Columns in CSS - Help!

  • 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.

  • #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;.


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


      • #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">
        <title>Jesse Cooke Design</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="" rel="stylesheet">
        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;
        <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>


        Hope that helps.

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

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






        Incredible Stock

        Latest Topics


        • Breanne.C
          Reply to Helloooooo!
          Actually, I do have a print related issue if you'd like to take a stab at helping me with. Should I post in the correct category with the issue and picture that goes with it?
          Today, 10:29 PM
        • Breanne.C
          Reply to Font ID Please
          Oh yeah.

          Catorze27 Style 1 Bold best matched it, for the exception of the M, which I easily was able to fix....
          Today, 10:14 PM
        • B
          Reply to Logo Design - Font to match and go alongside chosen logo
          You'll need to add an email address for interested designers to contact you and work out details offline.
          Today, 04:34 PM
        • Peter3v
          Logo Design - Font to match and go alongside chosen logo
          Dear Sir/Madam,

          I'm the owner of a recruitment company whom has a logo that they are happy with BUT would like the name of the recruitment business to be to the immediate right of the logo...
          Today, 12:40 PM
        • PrintDriver
          Reply to Poster for a school project
          Still doesn't help the student figure out how to come up with a viable concept. If they had done even the tiniest bit of research, your ''concept'' would have been easily discovered. It's on just about...
          Today, 06:54 AM
        GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings