How to create web page using CSS and div to create 4 split screen?
HTML would look like this:
<div class="box">
Area 1
</div>
<div class="box">
Area 2
</div>
<div class="box">
Area 3
</div>
<div class="box">
Area 4
</div>
CSS would look like this:
html, body {
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
height: 50%;
}
Here's a Fiddle to play with: http://jsfiddle.net/UMKWU/
<div class="one" style="float: left; width: 50%; height: 50%;">
</div>
<div class="two" style="float: left; width: 50%; height: 50%;">
</div>
<div class="three" style="float: left; width: 50%; height: 50%;">
</div>
<div class="four" style="float: left; width: 50%; height: 50%;">
</div>
I'm not allowed to comment on questions, otherwise I would just add a comment on first answer by Jordan. His answer is correct, but when you add border, you need to account for the border width, in that case, just add to your css: border-width:1%; and change the width:49%;
height: 49%;.
That should do the trick, here is a link to Fiddle: http://jsfiddle.net/UMKWU/3/
Hi you can do as like this
Css
html, body {
width: 100%;
height: 100%;
}
.box1, .box2, .box3, .box4 {
float: left;
width:49%;
height: 49%;
border-style: solid;
border-width:1%;
}
.box3{
clear:left;
}
HTML
<div class="box1">
Area 1
</div>
<div class="box2">
Area 2
</div>
<div class="box3">
Area 3
</div>
<div class="box4">
Area 4
</div>
Live demo here http://jsfiddle.net/rohitazad/UMKWU/8/
Related
I have created two side by side owl carousel scroll elements. Schema:
I want to achieve, that price item description is little bit over owl carousel item borders. Schema:
Can someone please help with this situation using css or jquery.
Edit:
I crated replica. There are two owl elements. I want price:before element to be seen:
$("#banner_section_right .slider").owlCarousel({});
$("#banner_section_left .slider").owlCarousel({});
#container {
width: 100%;
height: 200px;
background: blue;
position: relative;
float: left;
}
#banner_section_right {
width: 70%;
background: red;
float: left;
}
#banner_section_left {
width: 30%;
background: green;
float: left;
}
#banner_section_left .item {
width: 100%;
background: yellow;
}
#banner_section_left .item:before {
width: 1em;
background: yellow;
top: 0;
content: "";
position: absolute;
right: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div id="container">
<div id="banner_section_right">
<div class="slider">
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
</div>
</div>
<div id="banner_section_left">
<div class="slider">
<div class="item">
<p>
$1 000 000
</p>
</div>
</div>
</div>
</div>
I have example your can learn from this might help you what you want to achieve.
html:
<div id="container">
<div class="green"></div>
<div class="red"></div>
<div class="box"></div>
</div>
CSS:
#container{
width: 100%;
height: 200px;
background: blue;
position: relative;
}
div.green{
background: green;
display: block;
height: 100px;
}
div.red{
background: red;
display: inlinblock;
height: 100px;
}
div.box{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
have a look at this css property transform: translateY(-50%); this can move object over other.
Working example : http://fiddlesalad.com/css/div-over-other-div
This should be simple for you CSS gurus, but I really can't get this going. There are 4 boxes, example code:
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left"></div>
<div style="width: 200px; float: left"></div>
</div>
</div>
When the window width is less than 800 only the rightmost div is moved, leaving them with 3 on top, and 1 on the next row.
I want the second two to go down the page as a pair. 2 on top, 2 on bottom, even if there is space for 3 next to eachother.
You need to set style for firstPair and secondPair elements
div[id$="Pair"] {
display: inline-block;
float: left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">s</div>
<div style="width: 200px; float: left">d</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">f</div>
<div style="width: 200px; float: left">g</div>
</div>
</div>
And one more solution with shorten html, but some more use css
div[id$="Pair"] {
display: inline-block;
}
[id$="Pair"] > div {
width: 200px;
float: left;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>s</div>
<div>d</div>
</div>
<div id="secondPair">
<div>f</div>
<div>g</div>
</div>
</div>
div[id$="Pair"] {
display: inline-block;
margin: 0;
}
[id$="Pair"] > div {
display: inline-block;
width: 200px;
margin: 2px 0;
background: lightgreen;
}
#wrapper {
text-align: center;
}
<div id="wrapper">
<div id="firstPair">
<div>1</div>
<div>2</div>
</div>
<div id="secondPair">
<div>3</div>
<div>4</div>
</div>
</div>
It is about BFC.
You might also float the containers :
#wrapper> div {
float:left;
}
<div id="wrapper">
<div id="firstPair">
<div style="width: 200px; float: left">1</div>
<div style="width: 200px; float: left">2</div>
</div>
<div id="secondPair">
<div style="width: 200px; float: left">3</div>
<div style="width: 200px; float: left">4</div>
</div>
</div>
Here's my solution. I tend to work in a fully responsive environment, so this will position them and be fully responsive on mobile. I also isolated the css, the inline colors are just for demo.
<style>
div#firstPair {
width: 100%;
max-width:400px;
float: left;
}
div#firstPair div{
width: 50%;
float: left;
}
div#secondPair {
width: 100%;
max-width: 400px;
float: left;
}
div#secondPair div{
width: 50%;
float: left;
}
</style>
<div id="wrapper">
<div id="firstPair">
<div style="background-color: blue;">first_1</div>
<div style="background-color: green;">first_2</div>
</div>
<div id="secondPair">
<div style="background-color: red;">second_1</div>
<div style="background-color: orange;">second_2</div>
</div>
<div style="clear: both;"></div>
</div>
I want display a set of images with a description below. I chose to use Ionic cards.
I got this result (the first image):
While I want to preserve the same layout I have now, and add a description.
Here is my code:
<ion-content ng-controller="cityController">
<div class="row">
<div class="col col-33">
<div class="list card">
<div class="item item-body">
<img class="full-image"src="img/images/opera.jpg"/>
This is a "Facebook" styled Card..
</div>
</div>
</div>
<div class="col col-33">
<img src="img/images/basilique.jpg"/>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg"/>
</div>
</div>
.center {
text-align: center;
}
.col {
overflow: hidden;
}
.row {
overflow: hidden;
height: 180px;
}
.fullscreen {
width: 100%;
height: 100%;
}
How can I fix this?
UPDATE
You have to change your source little bit.
Example HTML:
<div class="row">
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_fjords.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_forest.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_mountains.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
</div>
Example CSS:
.col-33 {
width: 33%;
float:left;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
text-align: center;
}
Live demo here
This is just an example how it can work.
UPDATE:
To have the images full sized, you need to put the description over it.
In that case this CSS is required.
.col-33 {
width: 33%;
float:left;
position: relative;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.6);
}
I am trying to create a header with 3 divs: one is aligned left, one is aligned right and the other is in the center.
the page is for example 1200px
the black,red and yellow rectangles are 960px and centered in the page.
elements in the black rectangle are added to the left,
elements in the yellwo rectangle are added to the right,
and the elements in the red tectangle are centered.
This is a good general case study for header of a site
This will solve your issue
<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
<div style='float:left;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
<div style="margin:10px auto;text-align:center">Some content</div>
<div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
I wrote an article on this a while back here is my code...
<div id="mainContent">
<div id="col1">
Column 1
</div>
<div id="col2">
Column 2
</div>
<div id="col3">
Column 3
</div>
<div id="clearance" style="clear:both;"></div>
</div>
And here is the CSS for it....
#mainContent {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#col1 {
margin: 10px;
float: left;
width: 300px;
}
#col2 {
margin: 10px;
float: left;
width: 300px;
}
#col3 {
margin: 10px;
float: left;
width: 300px;
}
Hope this helps... Phillip Dews
Try this..
<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>
<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>
can you please help me with some css magic.
I am trying to achieve a flixable multi column layout. something like this http://masonry.desandro.com/demos/basic-multi-column.html can I achive this with Blueprint and no javascript.
the thing with blueprint now is that is added lots of white space (see attachment)
Following is just sample one.. You just change width/height according to your requirement. Hope this helps.
CSS
----
.content {
float: left;
display: block;
width: 1000px;
background: red;
}
.sub-content {
float:left;
width: 200px;
background: blue;
margin: 10px;
}
Sample HTML
-----------
<div class="content">
<div class="sub-content" style="width: 500px; height: 300px;">
DIV 1
</div>
<div class="sub-content" style="width: 200px; height: 100px;">
DIV 2
</div>
<div class="sub-content" style="width: 500px; height: 300px;">
DIV 3
</div>
<div class="sub-content" style="width: 250px; height: 300px;">
DIV 4
</div>
</div>