I can divide a page into sections and give them separate colour using css as
.window:nth-child(1) {
background: #d5d7dd;
top: 0%;
}
.window:nth-child(2) {
background: #1babb7;
top: 100%;
}
Can I divide one of these 'child' into different columns and give them separate colour?
You've tagged HTML & CSS with this question, so here's some basic code to demonstrate how to create this.
Note: It seems you're new to HTML & CSS, so I encourage you to do some tutorials!
HTML:
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
CSS:
#container {
width:100%;
height:200px;
}
#one {
width:33.333%;
height:200px;
float:left;
background-color:red;
}
#two {
width:33.333%;
height:200px;
float:left;
background-color:yellow;
}
#three {
width:33.333%;
height:200px;
float:left;
background-color:blue;
}
Related
I was asked to produce my divs in a horizontal fashion (blue yellow red). However I've realized that I was able to do so without changing the display property. Can anyone pls tell me how's that possible?
Here's my html code
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
Here's my CSS code
.red
{
height:100px;
width:100px;
background-color:red;
position:relative;
left:200px;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
position:relative;
bottom:100px;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
position:relative;
left:100px;
bottom:200px;
}
one way to do this is adding a parent div and using flex-box to get them inline using flex-direction: row (wich is default so you won't have to set it by default to get a row of elements)
.red
{
height:100px;
width:100px;
background-color:red;
position:relative;
left:200px;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
position:relative;
left:100px;
}
.flex-parent{
display:flex;
flex-direction:row;
}
<div class="flex-parent">
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
</div>
If you want to know about behavior of the code you added with the question then Basically what you have done is used the css position property to achieve the goal. There are 5 types of positions in css which are
static
relative
absolute
fixed
sticky
and if you set anyone of these properties to an html element then you can control its position using left, right, top and bottom coordinates.
You can study more about these here
But its not best practice to use these to position elements unless it is required by flow and can't be achieved by other methods, like in your code you can easily achieve the result using css Flexbox, here is a great resource to study flexbox.
Hope it clears your query.
Change order of for achieving [ (1) blue (2) yellow (3)red ] result
You can simply add float property which will get you the desired result without any change in display properties or you can even use display: inline-block; for the desired results...
with display: inline-block;
.red
{
height:100px;
width:100px;
background-color:red;
display: inline-block;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
display: inline-block;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
display: inline-block;
}
<div class="blue">
</div>
<div class="yellow">
</div>
<div class="red">
</div>
with float: left;
.red
{
height:100px;
width:100px;
background-color:red;
float: left;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
float: left;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
float: left;
}
<div class="blue">
</div>
<div class="yellow">
</div>
<div class="red">
</div>
with position: absolute;
.red
{
height:100px;
width:100px;
background-color:red;
position: absolute;
left: 200px;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
position: absolute;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
position: absolute;
left: 100px;
}
<div class="blue">
</div>
<div class="yellow">
</div>
<div class="red">
</div>
Have a nice day!!!
regards,
Om Chaudhary
I have this sample
link
CODE HTML:
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CODE CSS:
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
I want to move div on the right (.right) to be in line with div website (banner) without changing HTML code (just CSS).
I tried to add margin-top:-6em look different on other resolutions.
Can you help me to solve this problem?
Thanks in advance!
If you can only change the CSS, you have to use margin-top:-100px instead of margin-top:-6em if you want to align it. https://jsfiddle.net/ck3pux8x/1/
But the best solution would be changing the HTML to move the .right div outside the .inner an place it next to the .banner and make .banner float right. https://jsfiddle.net/ck3pux8x/2/
HI now try to this define your body position relative and your class .right position absolute and left or top according to your requirement .
as like this
body{
position:relative;
}
.right {
background: aqua;
position: absolute;
left: 400px;
top: 0;
}
Demo
.right{
position:absolute;
left:400px;
top:0;
}
body{position : relative;}
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
You can use relative re-positioning in this case:
.right{
background:aqua;
position: relative;
top: -100px;
}
https://jsfiddle.net/ck3pux8x/4/
I want make two columns with text inside. Depending on where it will be more text box will increase the width, but height must be the same.
This is my code, and i don't know how to solved the problem.
https://jsfiddle.net/x0qqtr2y/
<div id="main>
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
#main {
width:100%;
background:gray;
display:table;
position:relative;
}
.cell1 {
width:auto;
height:auto;
display:table-cell;
background:red;
float:left;
}
.cell2 {
width:auto;
height:auto;
display:table-cell;
float:left;
background:blue;
}
use display:flex; on the parent element example below
CSS
#main {
width:100%;
display:flex;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
HTML on your main make sure you close the quote marks
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
To learn more about flex use the link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would try this CSS, worked when I tried it in your Fiddle:
#main {
width:100%;
background:gray;
position:relative;
}
#main div {
display: inline;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
Hi Because u miss (") id="main" below code working fine check it
CSS
#main {
width:100%;
background:gray;
}
.cell1 {
background:blue;
float:left;
}
.cell2 {
float:left;
background:red;
}
Html
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSome</div>
<div class="cell2">SomeTEXTSomeTEXT1</div>
</div>
I'm trying a web page with 3 section together:
div A width:200px
div B full width
div C width:10px;
HTML:
<div class="main">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
CSS:
.main{
min-width: 1200px;
height: 100%;
width: 100%;
background-color:#F00;
}
.a{
width:200px;
height:500px;
background-color:#0F0;
float:left;
}
.b{
height:500px;
background-color:#00F;
float:left;
}
.c{
width:10px;
height:500px;
background-color:#FF0;
float:left;
}
But the div B not full screen!How to correct this?
You need to reorder your <div>. First <div class="a">, then <div class="c">, then <div class="b">:
<div class="main">
<div class="a">A</div>
<div class="c">C</div>
<div class="b">B</div>
</div>
As a next step, you will have to remove the float: left; from .b (making elements float removes the typical block level element behaviour of grabbing the available width) and change the float for .c to right.
The last step then will have to be that you will have to assign the width you want for all 3 to their container .main.
I think you will need some css lib like bootstrap etc or use media queries.
For fix wide the css will look like
.main{
min-width: 1200px;
height: 100%;
width: 100%;
background-color:green;
}
.a{
width:200px;
height:500px;
background-color:#0F0;
display:inline-block;
float:left;
}
.b{
height:500px;
background-color:#0F0;
display:inline-block;
width:990px;
}
.c{
width:10px;
height:500px;
background-color:#FF0;
display:inline-block;
float:right;
}
.b
{
background-color:#00F;
float:left;
height:500px;
min-width: 990px; /* 1200 -200-10*/
}
Just how can I make my page look like this:
When the left, and right (the upper divs
When A and B's height is unknown (well, the one who has most content will decide on how down below C is)
Thanks in advance
I would make the sections percentages, that way you get these proportions no matter what screen size the user has.
CSS
#sectionA
{
float:left;
width: 20%;
}
#sectionB
{
float:left;
width: 80%;
}
#sectionB
{
clear:both;
width: 100%;
}
HTML
<div id="sectionA"></div>
<div id="sectionB"></div>
<div id="sectionC"></div>
http://jsfiddle.net/AHk78/
HTML
<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>
CSS
#upleft { width:100px; height: 500px; background:red; float:left; }
#upright { width:300px; height:200px; background:blue; float:left }
#below { height:300px; width:100%; background:green; clear:both }
CSS:
#divA
{
float:left;
width: <width of div A>;
}
#divB
{
float:left;
width: <width of div B>;
}
#divC
{
clear:both;
}
HTML:
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
You can make it inline with following example for right alignment:
<div style="width:30%;float:right"><!--write your required tags--></div>
Here width and float varies depending on the requirement
Something like this:
A
float: left
B
float: left;
C
clear: both;
Hi you can make this simply as like this
Css
#left {
width:100px;
min-height: 300px;
background:red;
float:left;
}
#right {
min-height:200px;
background:blue;
float:left;
width:400px;
}
#bottom{
height:200px;
background:green;
clear:both;
}
HTML
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
Live demo link here http://jsfiddle.net/rohitazad/AHk78/2/