I need a simple way to make my layout form two tiles for content in a row.
Currently .cellleft extends to the right end so .cellright is displayed in the next row.
div.cellleft{
background-color: #191a1c;
margin-top: 40px;
margin-left: 100px;
margin-right: 1px;
padding-top: 1px;
width: 43%;
}
div.cellright{
background-color: #191a1c;
margin-top: 40px;
margin-right: 100px;
margin-left: 1px;
padding-top: 1px;
width: 43%;
}
problem pictured
To make your .cellleft to go left and .cellright to go right, try this:
.cellleft, .cellright {
width: 50%;
float: left;
}
.cellleft {
background-color: red;
}
.cellright {
background-color: blue;
}
.clearFloat {
clear: both;
}
<div class"row">
<div class="cellleft">
some contents here.. this is left cell
</div>
<div class="cellright">
some contents here... this is right cell
</div>
</div>
<div class="clearFloat"></div>
<div class"row">
<div class="cellleft">
some contents here.. this is left cell
</div>
<div class="cellright">
some contents here... this is right cell
</div>
</div>
<div class="clearFloat"></div>
<div class"row">
<div class="cellleft">
some contents here.. this is left cell
</div>
<div class="cellright">
some contents here... this is right cell
</div>
</div>
Make use of float. You can choose to float your .cellright to its right too.
Eg; Change in your css, float: right for .cellright
Hope this helps.
Please try below CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width:40%;
margin:10px;
}
</style>
</head>
<body>
<div class"row">
<div class="box">
some contents here.. this is left cell
</div>
<div class="box">
some contents here... this is right cell
</div>
</div>
<div class"row">
<div class="box">
some contents here.. this is left cell
</div>
<div class="box">
some contents here... this is right cell
</div>
</div>
<div class"row">
<div class="box">
some contents here.. this is left cell
</div>
<div class="box">
some contents here... this is right cell
</div>
</div>
</body>
</html>
i found the ideal solution for my case:
.cell {
width: 50%;
height: 100%;
float: left;
}
.contentbox{
background-color: #191a1c;
margin-top: 40px;
margin-right: 1px;
padding-top: 1px;
margin-left: 50px;
margin-right: 50px;
}
<div class="cell">
<div class="contentbox">
stuff
</div>
<div class="contentbox">
stuff
</div>
</div>
<div class="cell">
<div class="contentbox">
stuff
</div>
<div class="contentbox">
stuff
</div>
</div>
Related
I want to position a div according to the picture:
I'm successful so far by using Bootstrap's row class and using z-index in my CSS. But when I resize the browser, it's not responsive, it just floats off the right side of the page. By the way, I'm using position: absolute (I read online that I have to use this in order to make use of z-index). Is there any other more elegant way to do this? I want it to be responsive but can't seem to find any other workaround than the wonky one I implemented.
Code:
#div2 {
float: inherit;
position: absolute;
top: inherit;
left: 60%;
width: 320px;
height: 1290px;
z-index: 5;
}
<div class="container">
<div class="div-container">
<div class="row">
<div id="div1">
<p>Div 1</p>
</div>
<div id="div2" align='center'>
<p>Div 2</p>
</div>
</div>
<div class="row">
<div id="div3">
<p>Div 3</p>
</div>
</div>
</div>
</div>
You need to make use of the nested rows inside a column. See here - Bootstrap Nesting. Ignore the CSS here as it is for snippet styling and height is used for ignoring the content.
.B {
min-height: 130px;
background: #393276;
margin-bottom: 20px;
}
.A {
min-height: 100px;
margin-bottom: 20px;
background: #393276;
}
.C {
min-height: 250px;
background: #393276;
}
div {
text-align: center;
color: #fff;
font-size: 32px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="row">
<!-- First Column -->
<div class="col-sm-6">
<!--Rows nested inside a column-->
<div class="row">
<div class="col-12">
<div class="A">A</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="B">B</div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="col-sm-6">
<div class="C">C</div>
</div>
</div>
</div>
I have used flexbox to keep responsive design and some margin positioning to keep the formation together.
.container{
display: flex;
flex-wrap: wrap;
width: 150px;
}
.div1, .div3{
margin-right: 5px;
width: 50px;
height: 50px;
}
.div2{
margin-right: 5px;
width: 50px;
height: 110px;
}
<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
<br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>
Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.
If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/
Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.
You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/
I know a lot of topics have been written about div side by side, but I couldn't find a solution for my specific issue. I managed to get 2 divs side by side, and be mobile friendly (not require sideways scrolling), but there's a background color problem. If 1 div has little text while the div next to it doesn't, then the missing blocks of height just show blank instead of having a background. How can I fix this while staying mobile friendly?
Example page: http://www.gloryhood.com/articles/ztest.html
CSS:
div.table {
max-width: 100%;
}
div.firsthalf {
background-color: #ffffff;
float: left;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}
div.secondhalf {
background-color: #ffffff;
margin-left: 50%;
max-width: 50%;
text-align: left;
word-wrap: break-word;
}
HTML:
<div class="table">
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvni
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
<div class="firsthalf">
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvid
</div>
</div>
I think you want something like this,
$(document).ready(function(){
$('.container').each(function(){
var firstDiv = $(this).find('.firsthalf');
var secondDiv = $(this).find('.secondhalf');
if(firstDiv.height() >= secondDiv.height()){
secondDiv.css('height',firstDiv.height());
} else {
firstDiv.css('height',secondDiv.height());
}
});
});
body{background: #39b1a4;}
div.table {
max-width: 100%;
}
div.firsthalf {
background-color: #ffffff;
float: left;
width: 50%;
text-align: left;
word-wrap: break-word;
}
div.secondhalf {
background-color: #ffffff;
width: 50%;
text-align: left;
word-wrap: break-word;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="container">
<div class="firsthalf"> Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
</div>
<div class="container">
<div class="firsthalf">
Leftcvni
</div>
<div class="secondhalf">
Righvidonvodsnvojsdnvjosdnvjosdnvjosdnbvjcmsdkcmnksdoncksdlcnsdlkcnsdjklncjklsdncjlksdcljksdcjksdosdnvjosdnvsodnvslodnvsdlonvt
</div>
</div>
<div class="container">
<div class="firsthalf">
Leftcvniowdcnnvcidocniodsdckscksldncskdlcnklsdncklsdncskldcowdicnwcnowencweioncwiocniowecioweniowenciowenciowencweoicniowenoci
</div>
<div class="secondhalf">
Righvid
</div>
</div>
</div>
The best way to describe what I want to do is using this image. As you can see I have 3 different images as background (which are three different Divs) and I want to insert 3 List Points (here named as: "LV", "RP", "IP") with a centred description/heading below (here as: Lv: 15, RP: 16975 and so on).
My biggest problem is to handle the centred width of those elements. I have no idea how to solve this the best way regarding the CSS.
My HTML:
<div class="package">
<div class="item-description">
<div class="col-md-3"><span class="title">LV</span><span class="description">15</span></div>
<div class="col-md-3"><span class="title">RP<span><span class="description">16975</span></div>
<div class="col-md-3"><span class="title">IP<span><span class="description">40000</span></div>
</div>
</div>
Are you looking for something like this?
It's using quite a few elements (which could possibly be converted into pseudo elements), but it shows a general overview of what you might be looking for.
Also, with the id's and classes this shouldn't make it too hard to alter for your needs.
.container {
width: 32%;
height: 200px;
background: red;
display: inline-block;
}
.container .title {
margin-top: 100px;
width: 32%;
height: 100%;
display: inline-block;
vertical-align: middle;
text-align: center;
color: white;
}
#one {
background: url(http://placekitten.com/g/300/300);
}
#two {
background: url(http://placekitten.com/g/200/200);
}
#three {
background: url(http://placekitten.com/g/300/200);
}
<div id="one" class="container">
<div class="title">200
<div class="desc">I'm a very long description</div>
</div>
<div class="title">300
<div class="desc">desc</div>
</div>
<div class="title">400
<div class="desc">Be More Dog</div>
</div>
</div>
<div id="two" class="container">
<div class="title">200
<div class="desc">desc</div>
</div>
<div class="title">300
<div class="desc">I'm a tree.</div>
</div>
<div class="title">400
<div class="desc">What is a description?</div>
</div>
</div>
<div id="three" class="container">
<div class="title">200
<div class="desc">desc</div>
</div>
<div class="title">300
<div class="desc">a description of what?</div>
</div>
<div class="title">400
<div class="desc">Don't you like, er, trees?</div>
</div>
</div>
this might also work:
Note: I've used a pseudo effect here, but to keep my code 'minimal', rather than applying it to individual items (as you would for individual descriptions), i've just used an existing item.
html,
body {
margin: 0;
padding: 0;
}
.sec {
width: 33%;
height: 200px;
background: red;
background: url(http://placekitten.com/g/200/200);
position: relative;
text-align: center;
color: white;
vertical-align: middle;
display: inline-block;
line-height: 200px;
margin-left: -0.5%;
}
.col {
width: 32%;
margin-left: -0.5%;
font-size: 25px;
display: inline-block;
position:relative;
}
.col:after{
padding-top:25px;
font-size: 10px;
position:absolute;
content:"description";
left:25%;
}
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
<div class="sec">
<div class="col">
title
</div>
<div class="col">
title2
</div>
<div class="col">
title3
</div>
</div>
Try this in your css
.description, .title{float:left; width:100%; text-align:center;}
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.