3 column layout

HTML & CSS
1

Hi Guys,
I’m new to css and html. I wanted to make a 3 column layout occupying equal space with border and margin.

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
    <meta charset="utf-8">
   </head>
  <body>
    <h1 class="main">Our Menu</h1>
    <div class="outer">
      <div class="box">
        <p class="heading">Dummy</p>
        <p class="para">Borders and Colors: Each section should have a background color set to some color (of your choosing). Set the background color of each section title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the section and section title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the section and section title region that is 1px thick. Warning: While not specifying borders and colors according to the requirements does not hurt your grade so much, not doing so will make it much harder for your classmates to peer grade the rest of your assignment, possibly resulting in a much lower grade.</p>
      </div>
      <div class="box">
        <p class="heading">Dummy</p>
        <p class="para">Borders and Colors: Each section should have a background color set to some color (of your choosing). Set the background color of each section title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the section and section title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the section and section title region that is 1px thick. Warning: While not specifying borders and colors according to the requirements does not hurt your grade so much, not doing so will make it much harder for your classmates to peer grade the rest of your assignment, possibly resulting in a much lower grade.</p>
      </div>
      <div class="box">
        <p class="heading">Dummy</p>
        <p class="para">Borders and Colors: Each section should have a background color set to some color (of your choosing). Set the background color of each section title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the section and section title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the section and section title region that is 1px thick. Warning: While not specifying borders and colors according to the requirements does not hurt your grade so much, not doing so will make it much harder for your classmates to peer grade the rest of your assignment, possibly resulting in a much lower grade.</p>
      </div>
    </div>  
  </body>
</html>   

*{
	box-sizing: border-box;
	
}

.main{
	font-family: Arial;
	font-size: 250%;
	text-align: center;

}

.box{
	width: 33.33%;
	float: left;
	margin: auto;
	border: 1px solid;
	margin: 2px;
}

p{
	font-family: sans-serif;
	padding: 5px;
}

The Dummy is the heading of the box.Once I add the margin, the last box moves to the next line. I wanted it to stay in the same line even after resizing the browser.
Any help would be appriciated !
Thank you

2

Hi, tejas1, welcome to the forums.

Without the accompanying HTML and more knowledge of how you are constructing the page, we can only guess. Based only on the slight amount of code presented, I would suggest that you delete the margin:2px; assigned to .box.

You have assigned a width of 33.3% to each column plus a margin of 2px. Added together that exceeds 100% which would make the third column wrap below the first two.

3

Thank You for the reply!

Here is the link to the html code.

If I delete the margin, how do I space the 3 boxes equally ?

4

When we offer you a suggestion, please try exactly what we suggest and give us feedback about what you see so we will know what happened on your end.

I suggested that you delete the margin:2px from .box. Please do that in your codePen and let us know what happens.

While you are testing the code, be sure to delete different amounts of text from two of the columns.

While you are in a thinking mode, please explain why your are using floats for the columns instead of display:table/table-cell or flexbox.

5

Off Topic:

Welcome to the forums, @tejas1.

When you post code here, you need to format it so that it will display correctly.

You can highlight your code, then use the </> button in the editor window, which will format it, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. (I find this approach easier, but unfortunately some European and other keyboards don’t have that character.)

6

TBH floating columns is rather the old way of making a 3 column layout. A better way with modern browsers wold be using CSS tables or flex.

1 Like
7

I would agree with @Gandalf that css tables would be a much better way to do this.
Also you need to validate your code, I notice you are nesting <p> elements within <span>s in the Codepen, which is invalid.

8

The 3 Columns stay in the same line after deleting the margin: 2px .
After deleting different amount of text , the height of the boxes change.

I haven’t learnt about table/table-cell or flexbox.

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
    <meta charset="utf-8">
    <title>Assignment</title>
   </head>
  <body>
    <h1 class="main">Our Menu</h1>
    <div class="outer">
      <span class="box b1">
        <p class="heading">Chicken</p>
        <p class="para">Borders and Colors: Each span should have a background color set to some color (of your choosing). Set the background color of each span title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the span and span title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the span and span title region that is 1px thick. Warning: While not specifying borders and colors according to the requirements does not hurt your grade so much, not doing so will make it much harder for your classmates.</p>
      </span>
      <span class="box b1">
        <p class="heading">Beef</p>
        <p class="para">Borders and Colors: Each span should have a background color set to some color (of your choosing). Set the background color of each span title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the span and span title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the span and span title region that is 1px thick. Warning: While not specifying borders and colors according to the requirements does not hurt your grade so much, not doing so will make it much harder for your classmates to peer grade the rest of your assignment, possibly resulting in a much lower grade.</p>
      </span>
      <span class="box">
        <p class="heading">Sushi</p>
        <p class="para">Borders and Colors: Each span should have a background color set to some color (of your choosing). Set the background color of each span title region to some unique color (of your choosing). Make sure that the background color still allows the user to view the text in the span and span title regions. Depending on the color you choose, you may want to change the color of the text so it can be easy to read. Set a black border on both the span and span title region that is 1px thick. Warning: While not specifying borders and colors according to the requirements does not hurt your grade.</p>
      </span> 
    </div>
  
  </body>
</html>   

*{
box-sizing: border-box;

}

.main{
font-family: Arial;
font-size: 250%;
text-align: center;

}

.box{
width: 33.33%;
float: left;
border: 1px solid;
}

p{
font-family: sans-serif;
padding: 5px;
}
9

Can i use div instead of span ?

10

You should not be using span there, divs would be better, like in the OP.
Spans are in-line, p is a block, you cannot have a block inside an in-line element.

Try this in a fork of your codepen. Remove the floats and widths.
On .outer set display: table; table-layout: fixed; and on .box set display: table-cell.

11

Thank You !
It worked
How do I space the 3 boxes equally ?

12

table-layout: fixed should make the columns equal width.

13

1920×398 50.9 KB

What I meant was How do i give space between the boxes

14

If you want space between the borders then use border-spacing.

.outer{
  display:table;
  table-layout:fixed;
  border-spacing:10px 0;
}

If you want space inside the cell then add padding to the display:table-cell element.

.

box{
border: 1px solid;
display: table-cell;
padding:10px;
vertical-align:top;
}
1 Like
15

You could use border-spacing on the .outer element.

Another note about semantics.

<p class="heading">Chicken</p>

You should use a heading tag for this, as in <h2>.

16

Thank You !

17

Thank You !!

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.