Splitting a DIV into rows and columns

Question

Apologies if this has been asked before but I couldn't find exactly the same question.

So I have a #container div which holds the main part of the web page content.

I want to make a sub div so that I can create Rows in this container, each of a fixed height.

Then inside each row Have either 1 (100% width) or 2 (48% width each (with gap between each)) or 3 (30% width each) sections inside.

So I would imagine the page to be able to have the following layout (or any combination depending on the HTML)

Need to only be done in css/html

and so that the overall black container has a background and also the red/green/brown containers also have background-colour: rgba(0,0,0,0.5)

I tried just doing it with just divs

eg one at 100% width, and then putting 2 %50width divs inside it but they didn't keep their full size even when I set a min width for each div.

Could someone help with the css/html structure.

Many Thanks.

Answer 1

I did your layout and while explaining it will take some time, better a fiddle so you can check it out.

And, as I need to input code, this is the simple css involved:

* {
    box-sizing: border-box;
}
.container {
    width:100%;
    max-width:600px;
    border:2px solid black;
    margin: 0 auto;
    padding:10px;
}
.row {
    height:100px; /*set height*/
    border:2px solid blue;
    width:100%;
    margin-bottom:10px;
    padding:10px;
}
.col1 {
    border:2px solid red;
    width:100%;
    height:100%;    
}
.col2 {
    border:2px solid green;
    width:49%;
    float:left;
    height:100%;
    margin-right:2%;    
}
.col2:last-child {margin-right:0;  }
.col3 {
    border:2px solid brown;
    width:32%;
    float:left;
    height:100%;
    margin-right:2%;    
}
.col3:last-child {margin-right:0;  }

(and btw. it is responsive)

Answer 2

What might be a better solution, long term, would be to use the bootstrap framework (developed by twitter), which is very simple to use and has a lot of perks:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

http://getbootstrap.com/css/#grid

Answer 3

JSfiddle: https://jsfiddle.net/gqq7poje/1/

As mentioned in the comments, you use display:inline-block to have multiple columns in one row. However inline-block treats whitespace as characters, making it difficult to fit two columns with width:50%. As seen here: display: inline-block extra margin you can fix this by adding font-size: 0px; to the entire row.

In order to have margins between columns you make width:48% and margin:1%; to the row with two.

As others have recommended, consider using Bootstrap as it takes care of many nuances of making columns.

Answer 4

Maybe something like this. HTML:

<div id="container">
 <div class="row single">Your content</div>
 <div class="row double">
  <div class="column-2 left">Your content</div>
  <div class="column-2 right">Your content</div>
 </div>
 <div class="row triple">
  <div class="column-3 left">Your content</div>
  <div class="column-3 center">Your content</div>
  <div class="column-3 right">Your content</div>
 </div>
</div>

The CSS:

#container { width: 80%; margin: auto; background-color: grey; padding: 20px; }
.row { height: 150px; margin-bottom: 20px; position: relative; }
.row div { height: 100%; }
.single { background-color: white; }
.column-2 { width: 48%; }
.column-3 { width: 30%; }
.left { background-color: yellow; float: left; }
.center { float: left; margin: 0 5%; background-color: orange; }
.right { background-color: green; float: right; }

See a fiddle.

Answer 5

I got you the solution for your query.

I just done in a simple way using HTML and CSS only. Basically I used the rows and columns separating by div and I didn't given the borders to the col you can easily give in css as the code above mentioned josliber and Alvora.

It's responsive too, and should make your work done.

So here the code is :

Note : Make formatting again if format is misplace....

HTML CODE (PASTE IN BODY):

---

    <div class="container-fluid">
        <div id="my_row_edits" class="row">
            <div id="my_col_edits" class="col">
                <label class="my_profile_label_edit" for="">Maddy's Profile</label>
                <p id="my_1">first row | one col</p>
            </div>
        </div>

        <div id="my_row_edits" class="row">
            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>second row | first col</p>
            </div>
            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>second row | second col</p>
            </div>
        </div>

        <div id="my_row_edits" class="row">
            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>third row | first col</p>
            </div>

            <div id="my_col_edits" class="col">
                <p>Maddy_2.1</p> 
                <p>third row | second col</p>
            </div>

            <div id="my_col_edits" class="col">
                <p>Maddy_3.3./p> 
                <p>third row | third col</p>
            </div>
        </div>
    </div>

---

CSS CODE (RENAME ID IF U WANT TO):

---

#my_row_edits{

    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;

}

#my_col_edits{

    width: 100%;
    height: 200px;
    position: relative;
    align-items: center;
    justify-content: center;

}


.my_profile_label_edit{

    top: 0%;
    color: black;
    position: absolute;
    margin-left: 35%;
    font-size: 400%;
    font-weight: lighter;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

p{
    top: 30px;
    position: relative;
    text-align: center;

}

#my_1{

    top: 100px;
    position: relative;

}

---

**Here the Output : **