I'm trying to understand how to build a 4 boxes square like the one on the printscreen. I've found that layout on Apple's website and I pretty like it!
I tried with bootstrap and flexbox. I think flexbox is a better solution, but I didn't find a way to reproduce this layout.
Anybody can help me to figure out how to create that layout?
If you'd like to use bootstrap, this is easily doable.
.noMargin {
margin: 0px;
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: green;
}
.four {
background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row noMargin">
<div class="col one">
one
</div>
<div class="col two">
two
</div>
</div>
<div class="row noMargin">
<div class="col three">
three
</div>
<div class="col four">
four
</div>
</div>
</div>
If you would like to do pure html/css:
.row {
display: flex;
width: 100%;
}
.row div {
width: 50%;
}
.noMargin {
margin: 0px;
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: green;
}
.four {
background-color: blue;
}
<div class="row noMargin">
<div class="one">
one
</div>
<div class="two">
two
</div>
</div>
<div class="row noMargin">
<div class="three">
three
</div>
<div class="four">
four
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Box</title>
<style>
#div1{
height:300px;
width:300px;
background-color:red;
margin:0;
}
#div2{
height:300px;
width:300px;
background-color:green;
position:relative;
left:320px;
bottom:300px;
}
#div3{
height:300px;
width:300px;
background-color:yellow;
position:relative;
bottom:280px;
}
#div4{
height:300px;
width:300px;
background-color:blue;
position:relative;
left:320px;
bottom:580px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
</body>
</html>
Related
how can i achieve the attached layout
using html, bootstrap, CSS
where the circles will contains an images
and a detail box will be beside them
question has been updated with code snippet
what i have done is not accurate the sizes not responsive
and if i make the circle bigger than the rectangle it does not align vertically in middle
also the code inside the rectangle is not middle
could any one please provide me a demo
custom layout
.rectangle1{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle1{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.rectangle1{
display: inline-block;
height: 100px;
width: 100%;
background: #6f0a18;
position: relative;
}
.circle1{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:0%;
margin-left:-25px;
top: 0px;
background:red;
}
.circle2{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
right:0%;
margin-right:-25px;
top: 0px;
background:red;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="rectangle1">
<img class="circle1" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-left: 100px;">Title</h3>
<p style="padding-left: 100px;"> Sub Title</p>
</div>
</div>
<div class="col-md-6">
<div class="rectangle1">
<img class="circle2" src="https://www.freeiconspng.com/uploads/camera-icon-circle-21.png" />
<h3 style="padding-right: 100px; text-align: right;">Title</h3>
<p style="padding-right: 100px; text-align: right;"> Sub Title</p>
</div>
</div>
</div>
</div>
.outer-wrapp {
padding:30px;
}
ul {
list-style:none;
padding:0;
}
ul li {
margin: 55px 0px;
}
.wrapp{
padding:0px 15px;
}
.left .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-left: 5%;
padding-left: 20%;
}
.left .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
left: -37.5px;
}
.right .box {
position:relative;
width:95%;
height:35px;
border:1px solid #000;
margin-right: 5%;
padding-right: 20%;
}
.right .circle {
position:absolute;
width:75px;
height:75px;
border-radius:50%;
background:#000;
top: calc(50% - 37.5px);
right: -37.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-wrapp">
<div class="row">
<div class="col-xs-6 col-sm-6">
<ul class="left">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
<span>Text</span>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-6">
<ul class="right">
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
<li>
<div class="wrapp">
<div class="box">
<div class="circle"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Try this. it works for you.
Try something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
height: 40px;
width: 40px;
background-color: #000;
border-radius: 50%;
}
#id1 {
border: 1px solid black;
padding: 11px;
margin: 30px;
width: 100px;
}
</style>
</head>
<body>
<h2>Circle CSS</h2>
<div class="circle"><div id='id1'> text here</div></div>
</body>
</html>
try this
.container{
width:100%;
background:red;
margin:10px 0;
}
#image{
width:20%;
float:left;
}
#image img{
border-radius: 50px;
}
#text{
width:80%;
float:left;
}
#text h3{
padding:10px;
}
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
<div class="container">
<div id='image'>
<img src='https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png' width='100%' />
</div>
<div id="text">
<h3> Hello </h3>
</div>
<div style="clear:both;"></div>
</div>
How to put banners side by side using HTML/CSS? Ideally with different sizes as shown below?
One simple way would be to display the banners inline-block, and assign them the required width.
.banner {
display: inline-block;
}
.banner-sm {
width: 32%;
}
.banner-lg {
width: 65%;
}
.banner {
height: 100px;
background: #DDD;
padding: 0; margin: 0;
}
<div class="row">
<div class="banner banner-lg"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-lg"> </div>
</div>
Either use some grid system, or the bare CSS float property, pseudo example shown below:
.banner1 {
float: left;
width: 100px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner2 {
float: left;
width: 200px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner3 {
float: left;
width: 50px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.clearfix {
clear: both;
}
<div class="banner1">banner</div>
<div class="banner1">banner</div>
<div class="clearfix"></div>
<div class="banner2">banner</div>
<div class="clearfix"></div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="clearfix"></div>
Good luck
You can use Twitter Bootstrap to get grid system and other useful layout functionality:
.row div {
height: 30px;
background: #aaa;
border: 1px solid #ddd;
}
* {
box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
If you are familiar with twitter-bootstrap then use its Grid system otherwise using inline-block will help you.
div {
border: 1px solid #ddd;
height: 200px;
margin: 5px;
display: inline-block;
box-sizing:border-box;
}
<section style="width:650px">
<div style="width:415px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:415px;"></div>
</section>
you can use CSS3 flex-box concept
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-direction:column;
}
.flex-item {
background-color: cornflowerblue;
width: calc(100% - 20px);
height: 100px;
margin: 10px;
display:flex;
justify-content:space-between;
}
.sub{
height:100%;
background:white;
box-sizing:border-box;
}
.one{
width:75%;
border:1px solid green;
}
.two{
width:25%;
border:1px solid red;
}
.subb{
width:33%;
background:white;
height:100%;
}
<div class="flex-container">
<div class="flex-item">
<div class="sub one">sub 1 </div>
<div class="sub two">sub 2 </div>
</div>
<div class="flex-item">
<div class="subb s3">sub 3 </div>
<div class="subb s4">sub 4 </div>
<div class="subb s5">sub 5 </div>
</div>
</div>
You can use Bootstrap to do this.
Bootstarp is a Powerful css framework which enables web developer's
to do stuff like these(dividing screens etc).
Bootstrap is very easy to learn and implement.
You can start Learning Bootstrap here
Right now I have this:
But I need something like this:
HTML
<div id="content">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
...
</div>
CSS
.block
{
width:350px;
background-color:white;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
}
#content
{
position:relative;
display:inline;
overflow:auto;
}
I tried using columns but that didn't work well, it showed one column only even though the column count was higher than 1.
Here is my solution:
HTML:
<div class="grid-container">
<div class="third">
<div class="grid grid1">
<p>Grid 1</p>
</div>
<div class="grid grid2">
<p>Grid 2</p>
</div>
</div>
<div class="third">
<div class="grid grid3">
<p>Grid 3</p>
</div>
<div class="grid grid4">
<p>Grid 4</p>
</div>
</div>
<div class="third">
<div class="grid grid5">
<p>Grid 5</p>
</div>
<div class="grid grid6">
<p>Grid 6</p>
</div>
</div>
</div>
CSS:
.grid-container {
width: 100%;
text-align: center;
margin-top: 15px;
}
.third {
display: inline-table;
width: 30%;
}
.grid {
border: 1px solid black;
margin: 10px 0;
}
.grid1 {
height: 200px;
}
.grid2 {
height: 100px;
}
.grid3 {
height: 100px;
}
.grid4 {
height: 350px;
}
.grid5 {
height: 200px;
}
.grid6 {
height: 200px;
}
Now i have used lots of css classes here (grid1, grid2 ...), they normally dont have to be used, just set height: auto so it takes the height needed to show all content.
Working example can be found here:
http://cssdeck.com/labs/full/nuauntmo
Depending on what you are trying to achieve, you could put the vertically stacked blocks in separate containers. Something like this:
HTML:
<div id="content">
<div class="col">
<div class="block" style="height:600px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
<div class="col">
<div class="block" style="height:500px;">
</div>
<div class="block" style="height:500px;">
</div>
</div>
...
CSS:
.col {
display: inline-block;
margin-right:80px;
vertical-align: top;
}
.block {
width:350px;
background-color:#ccc;
border-radius:5px;
margin-bottom:80px;
display:block;
vertical-align: top;
}
#content {
position:relative;
display:inline;
overflow:auto;
}
The columns will wrap if there is not enough horizontal space though, so the container would have to have a fixed width.
try adding vertical-align property in css.
.block
{
width:350px;
background-color:grey;
border-radius:5px;
margin-right:80px;
margin-bottom:80px;
display:inline-block;
vertical-align: top;
}
I have some problems with my DIV table.. maybe there is a better way to do this.
I want to have all columns to be the same height as the highest column. Is there a way to do it? or is there another way to make this work ?
I have to made a jsfiddle example here with my code: http://jsfiddle.net/rb500o4L/ (right column is higher than left, middle and the logo column.)
My CSS code:
div.round-border {
border: solid 1px;
border-color: #002F67;
border-radius: 10px;
}
#container {
display: table;
width: 100%;
}
#row {
display: table-row;
}
#cell {
display: table-cell;
}
#cell-logo {
display: table-cell;
width: 200px;
}
My HTML code:
<div id="container">
<div id="row">
<div id="cell">
<div class="round-border">
<h4>Left Col</h4>
<p>...</p>
</div>
</div>
<div id="cell">
<div class="round-border">
<h4>Middle Col</h4>
<p>...</p>
</div>
</div>
<div id="cell">
<div class="round-border">
<h4>Right Col</h4>
<p>...</p>
<p>...</p>
</div>
</div>
<div id="cell-logo">
<div class="round-border">
<h4>LOGO AREA</h4>
<p>...</p>
</div>
</div>
</div>
</div>
I appreciate any recommendation.
use this css
div.round-border {
border: solid 1px;
border-color: #002F67;
border-radius: 10px;
}
container {
width: 100%;
}
row {
height:auto;
}
#cell
{
height:auto;
min-height:400px;
width:50px;
display:inline-block;
}
#cell-logo {
width: 50px;
}
It may not be obvious from this that I am trying to create something like the table below:
http://jsfiddle.net/yVScW/1/
| 40% | 60% |
______________________________________
|----header----|---------content------|
|----header----|---------content------|
______________________________________
The idea is for the header to take up 40% of the row width and the content 60% of the row width on each row.
This was my best approximation in CSS but doesn't work:
.top {padding:5px;background:blue; width:200px;}
.layer {padding:5px;background:green;}
.header {padding:5px;background:yellow; width:40%;display:inline;}
.content {padding:5px;background:red; width:60%;display:inline;}
using this HTML:
<div class="top">
<p class="layer">
<div class="header">header</div>
<div class="content">content</div>
</p>
<p class="layer">
<div class="header">header</div>
<div class="content">content</div>
</p>
</div>
So yeah. Tables are evil. But. they work great here. Why don't you just do...
<table class="top">
<tr class="layer">
<th>
header
</th>
<td class="content">
content
</td>
</tr>
</table>
And change your styles to:
.top {
padding:5px;
background:blue;
width:200px;
}
.layer {
padding:5px;
background:green;
}
th {
padding:5px;
background:yellow;
width:40%;
display:inline;
}
.content {
padding:5px;
background:red;
width:60%;
display:inline;
}
HTML:
<div class="top">
<div class="layer left">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="layer right">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="clear"></div>
</div>
CSS:
div.clear
{
clear: both;
}
div.layer
{
float: left;
}
div.left
{
width: 40%;
}
div.right
{
width: 60%;
}
You can change your css to:
.top {
position:relative;
background:blue;
width:200px;
}
.layer {padding:5px;
background:green;
}
.header {
position:absolute;
left:0px;
display:table-cell;
background:yellow;
width:40%;
}
.content {
position:absolute;
right:0px;
display:table-cell;
background:red;
width:60%;
}
Updated fiddle: http://jsfiddle.net/yVScW/2/
How about something like this:
<div class="top">
<div class="layer">
<div class="header">header</div>
<div class="content">content</div>
<div class="clear"></div>
</div>
<div class="layer">
<div class="header">header</div>
<div class="content">content</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
.top {
background: blue;
width: 300px;
padding: 0;
}
.layer {
padding: 5px;
background: green;
}
.header {
padding: 1%;
margin: 0;
background: yellow;
width: 38%;
float: left;
}
.content {
padding: 1%;
margin: 0;
background: red;
width: 58%;
float: right;
}
.clear {
clear: both;
}
jsFiddle: http://jsfiddle.net/cdKJ3/1/