How i can make 2 different divs elements A and B what they are included on a div element C .
A and B to start from the same corner from top left, i try to change A and B to position absolute and working but i need A to keep it via position relative. the code can be found here https://jsfiddle.net/bms1upkn/2/
Html
<div class="c">
<div class="a">
</div>
<div class="b">
</div>
</div>
<div class="c">
<div class="a">
</div>
<div class="b">
</div>
</div>
<div class="c">
<div class="a">
</div>
<div class="b">
</div>
</div>
<div class="c">
<div class="a">
</div>
<div class="b">
</div>
</div>
</div>
CSS
.data {
width: 100%;
}
.c {
height: 200px;
width: 25%;
float: left;
margin-left: 10px;
margin-bottom: 20px;
}
.a {
position: relative;
background-color: red;
height: 200px;
width: 100%;
}
.b {
position: absolute;
background-color: green;
height: 100px;
width: 100px;
}
Not sure if this is what you want? Your description is difficult to comprehend.
https://jsfiddle.net/bms1upkn/4/
CSS:
.data {
width: 100%;
}
.c {
height: 200px;
width: 25%;
float: left;
margin-left: 10px;
margin-bottom: 20px;
position:relative;
}
.a {
position: absolute;
background-color: red;
height: 200px;
width: 100%;
}
.b {
position: absolute;
background-color: green;
height: 100px;
width: 100px;
}
.data {
width: 100%;
}
.c {
height: 200px;
width: 25%;
float: left;
margin-left: 10px;
margin-bottom: 20px;
position:relative; //new
}
.a {
position: relative;
background-color: red;
height: 200px;
width: 100%;
}
.b {
position: absolute;
background-color: green;
height: 100px;
width: 100px;
left:0px; //new
top:0px; //new
}
Related
I want to implement a div which contains 2 divs:
A row with two sides, left and right.
A div below the first one
For that I am doing as follows:
<div id="main">
<div id="box1">
<div id="left" />
<div id="right" />
</div>
<div id="box2" />
</div>
And this is the css
.main {
margin-top: 75px;
}
#box1 {
display: flex;
flex-direction: row;
width: 100%;
height: 450px;
transition: ease all 0.5s;
}
#box1 #left {
width: 50%;
height: 100%;
background-color: lime;
}
#box1 #right {
width: 50%;
height: 100%;
background-color: red;
}
#box2 {
width: 100%;
height: 600px;
background-color: gold;
}
But for some reasons, I am getting the second div "box2" in the same row of "box1", next to it.
Why is that?
this seems to work (check full page view):
.left {
background: red;
width: 50%;
float: left;
}
.right {
background: green;
position: relative;
float: left;
width: 50%
}
.bottom {
background: blue;
position: relative;
width: 100%;
top: 9vh;
float: none;
}
<div id = "main">
<div id = "box2" class = "bottom" > bottom </div>
<div id = "box1">
<div class = "left"> left </div>
<div class = "right"> right </div>
</div>
</div>
You just missed the closing </div> tags
here is when it fixed, working perfectly fine
.main {
margin-top: 75px;
}
#box1 {
display: flex;
flex-direction: row;
width: 100%;
height: 450px;
transition: ease all 0.5s;
}
#box1 #left {
width: 50%;
height: 100%;
background-color: lime;
}
#box1 #right {
width: 50%;
height: 100%;
background-color: red;
}
#box2 {
width: 100%;
height: 600px;
background-color: gold;
}
<div id="main">
<div id="box1">
<div id="left">Left Contents Here</div>
<div id="right">Right Contents Here</div>
</div>
<div id="box2">Belowe Contents Here</div>
</div>
So I have 3 divs side by side inside the div element and another div after them. However, this div is overlapping the others. How can I make "footer" come after "main"?
.main {
height: 500px;
width: 100%;
position: absolute;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just get rid off position:absolute in your main class:
.main {
height: 500px;
width: 100%;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just remove the
position: absolute;
display: block;
from
.main
I think you will find your desired result. Please , inform if there are any other issues. Thank you.
Remove positions from main and footer.
.main {
height: 500px;
width: 100%;
float:left;
}
.footer {
height: 250px;
width: 100%;
background: black;
float:left;
}
Question 1:I learnt Holy Grail of Layouts today, after coding,the browsers show me strange format like this(not a complete black border):
[
my code is following:
#container {
border: 10px solid black;
/*this code cause the umcomplete black border*/
padding: 0 220px 0 200px;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
Question 2:In my opion,if I make some changes, same layout will show but position:relative is not included.The format is still strange(content in midddle area is covered by both side areas):
.main2 {
background-color: grey;
float: left;
width: 100%;
min-height: 100px;
}
/*this is the only new code*/
#main2Inner {
margin: 0 220px 0 600px;
}
.left2 {
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
min-height: 100px;
}
.right2 {
float: left;
width: 220px;
margin-left: -220px;
background-color: green;
min-height: 100px;
}
<div id="container2">
<div class="main2">
<div id="mianInner">this is paragraph 4 I dont know why some content cannot be displayed</div>
</div>
<div class="left2">this is paragraph 5</div>
<div class="right2">this is paragraph 6</div>
</div>
You are dealing with floating elements overflowing their container. You may use overflow:hidden (or position/float, display) to modify the block formating context (BFC).
#container {
border: 10px solid black;
overflow: hidden;
/*keyword : Block Formating Context */
padding: 0 220px 0 200px;
min-width: 500px;
;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Flex or table display would be more reliable in my own opinion
#container {
border: 10px solid black;
display: flex;
min-height: 50px;
box-sizing: border-box;
}
.main1 {
background-color: grey;
flex: 1;
}
.left1 {
order: -1;
width: 200px;
background-color: red;
}
.right1 {
width: 220px;
background-color: green;
}
#container2 {
border: 10px solid black;
height: 50px;
/* will grow taller if needed */
display: table;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
}
#container2 > div {
display: table-cell;
}
<h1>display:flex</h1>
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
<hr/>
<h1>display:table</h1>
<div id="container2">
<div class="left1">this is paragraph 1</div>
<div class="main1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
Divs inside Div (id="icons") not starting new line (like Windows 7 icons)
I want the divs inside div with id="icons" don't start a new line it flows vertically. Why not start new line?
JsFiddle
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
body {
margin:0;
padding:0;
}
#icons {
position: fixed;
background: red;
width: 100%;
height: 100%;
overflow: auto;
}
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons2 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons3 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons4 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons5 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
#icons6 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons7 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons8 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons9 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons10 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
<div id="desktop">
<div id="icons">
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
</div>
</div>
A DIV by default is a display type of 'block' and therefore forces in the line break.
You can get around this by using display: inline-block; in your CSS like so:
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
#icons2 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
/* etc */
You can add this in at the higher level (Icons) but if you're trying to do Windows style then you probably want more control over what and where breaks occur.
(hopefully I interpreted your question correctly!)
Change the display type on those icon divs.
#icons div {
display:inline-block;
margin:5px;
}
http://jsfiddle.net/0y7ktkd2/1/
I've got this short code:
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2, #div10 {
width: 21px;
height: 100px;
}
#div3, #div9 {
width: 60px;
height: 60px;
}
#div4, #div8 {
width: 70px;
height: 70px;
}
#div5, #div7 {
width: 77px;
height: 77px;
}
#div6 {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
<div id="div8">Content8</div>
<div id="div9">Content9</div>
<div id="div10">Content10</div>
</div>
I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center.
I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.
Do you have any idea?
Just add vertical-align:middle; on the rule above:
CSS
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
vertical-align: middle;
}
DEMO HERE
Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example
I have added a new div inside of div with id div2 to div10 and updated css
#div1 > div {
display: inline-block;
align: center;
margin: 0% 0, 5%;
position: relative;
top: 50%;
}
#div1 > div[id] > div {
transform: translateY(-50%);
color: white;
border: 1px dotted yellow;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2 > div, #div10 > div {
width: 21px;
height: 100px;
}
#div3 > div, #div9 > div {
width: 60px;
height: 60px;
}
#div4 > div, #div8 > div {
width: 70px;
height: 70px;
}
#div5 > div, #div7 > div {
width: 77px;
height: 77px;
}
#div6 > div {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">
<div>
Content2
</div>
</div>
<div id="div3">
<div>
Content3
</div>
</div>
<div id="div4">
<div>
Content4
</div>
</div>
<div id="div5">
<div>
Content5
</div>
</div>
<div id="div6">
<div>
Content6
</div>
</div>
<div id="div7">
<div>
Content7
</div>
</div>
<div id="div8">
<div>
Content8
</div>
</div>
<div id="div9">
<div>
Content9
</div>
</div>
<div id="div10">
<div>
Content10
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/9tdzqvot/