Responsive 3 columns in solid row! Begginer :)

1

Hello Guys !

I am trying to create 3 columns that have 5px gaps between.

I got the looks right but not one next to each other.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
* {
  box-sizing:content-box;
}

#header{text-align: right;
        font-weight:bold;
        background-color: red}


.row:{
    display: ;
    clear: both;}

.header{
	text-align: center}

.left-col{
    background-color: #808080;
	col
	column-gap: 10px;
    width: 33.33%;
    left: 0%;
    right: auto;
	}
.center-col{
	background-color:#909090;
	column-gap: 10px;
	width: 33.33%;
	float:none
}
.right-col{
	background-color: #909090;
	column-gap: 10px;
	width: 33.33%;
	float:right;
}
<body>
	<div class="header">
	<h1>Our Menu</h1>
	</div>
	<div class="row">
	<div class="left-col">
		<div id="header">Chicken</div>
		<p>Suculent chicken thighs. They been  marinaded in youghurt with corriander and dried chilly flakes for 12 hours, to make juicy we bursting them wist cpecial house flavouring over the grill using bouqet garnet. One of our house specialites!Enjoy</p>
		</div>
		
		<div class="center-col">			
		<div id="header" >Beef</div>
			<p>Sticky beef with with smokey coca cola bbq sauce. We slow roasting topside beef in clay oven for 6 hours. Sauce contain coca cola and fruit juices, for the peppery taste we use blend of 4 different peppers. If you like it mild hot dishes try this one!</p>
		</div>
		
		<div class="right-col">
		<div id="header">Sushi</div>
			<p>Ceviche. Like honest Peruvian cooking ceviche fruits and loads of citrus to cook fish in. Combination of avocado, mango and red onions with thinly sliced jalapeno will make you excited about this fragrant fresh dish please make sure you try it as your starter!</p>
		</div>
</body>
</html>

MANY THANKS

2

Your “row” div is not closed. Use display: flex; property to put them next to each other.
Hope this may helps you.

3

Try this, delete all what u did because there are too many mistakes.

<div class="container">
  <div id="one"></div>
  <div id="two"></div>  
  <div id="three"></div>  
</div>
.container {
  display: flex;
  height: 200px;
}

#one {
  width: 30%;
  height: 100%;
  background-color: red;
}
#two {
  width: 30%;
  height: 100%;
  background-color: blue;
}

#three {
  width: 30%;
  height: 100%;
  background-color: yellow;
}
4

thanks i need them in vertical from left to right :slight_smile:

5

May be you need to complete the responsive web design curriculum first.

6

Screenshot (2)
Screenshot (2)1099×325 111 KB

in need like that because for some reason I can get it all this way :confused:

7

Try this, change the color and text according to your need. Please complete your Responsive Web Design curriculum it will help you in this.

<div class="container">
  <div id="one">
    <div class="title">Title</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div id="two">
        <div class="title">Title</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>  
  <div id="three">
     <div class="title">Title</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>  
</div>
.container {
  display: flex;
  justify-content: space-between;
  height: 200px;
}

#one {
  display: flex;
  flex-direction: column;
  width: 33%;
  height: 100%;
  background-color: red;
}
.title {
  display: flex;
  align-self: flex-end;
  width: 30%;
  justify-content: center;
  background-color: grey;
}

#two {
  display: flex;
  flex-direction: column;
  width: 33%;
  height: 100%;
  background-color: blue;
}

#three {
  display: flex;
  flex-direction: column;
  width: 33%;
  height: 100%;
  background-color: yellow;
}
1 Like
8

@sarang.markandey03 legend! thank you! :star_struck:

1 Like
9