Let's just say I have three divs: DIV1, DIV2, DIV3 is this particular order.
I would like to stack them like that:
(BIG|DIV1
DIV2)|DIV3
I have tried with positioning and floats, unfortunately DIVs just overlaped, hide or stacked one under the another.
Any help or advice would be great.
UPDATED
My current code:
.div1
{
position: absolute;
margin-left: 125px;
width: 500px;
}
.div2
{
position: relative;
}
.div3
{
clear: both;
}
And the result:
(BIG|DIV1
DIV2)|
DIV3
HTML:
<div class="div1">DIV1</div>
<div class="div2">(BIG <br /> DIV2)</div>
<div class="div3">DIV3</div>
This solution employs a relatively-positioned wrapper. I'm hoping that this is available to you.
http://jsfiddle.net/LLRR8/2/
#div1 {
height: 50%;
position: absolute;
right: 0;
top: 0;
margin-left: 120px;
}
#div2 {
height: 100%;
width: 120px;
position: absolute;
left: 0;
top: 0;
}
#div3 {
height: 50%;
position: absolute;
top: 50%;
right: 0;
margin-left: 120px;
}
#wrapper {
position: relative;
}
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1{
width:200px;
height: 50px;
clear: both;
}
#div2{
width:100px;
height: 50px;
float: left;
}
#div3{
width:100px;
height: 50px;
float: left;
}
it would help if you'd post what code you have tried. If i'm understanding what you want right, this should do it:
#one {
clear: both;
height: 15%;
width: 40%;
margin-right: 0px;
margin-left: auto;
}
#two {
margin-right: auto;
margin-left: 0px;
float: left;
}
#three {
margin-right: 0px;
margin-left: auto;
}
Related
I working a layout that changes the behavior of z-index.
Is this possible?
The yellow box is a dropdown menu. It should be inside the Red box.
Pretty much anything is possible with CSS3. However the element inside div 1 would need to be separate for this to work. If it's inside div 1 it will drag div 1 around with it. You'll get much more flexibility if the side div is on it's own
But for your specific example you would need something like:
HTML:
<div class="top"></div>
<div class="bottom"></div>
<div class="side"></div>
CSS:
.top {
width: 90%;
margin-left: 10%;
height: 200px;
height: 250px;
background: red;
}
.bottom {
width: 90%;
height: 200px;
height: 250px;
margin-left: 5%;
background: grey;
margin-top: -150px;
}
.side {
width: 20%;
height: 200px;
height: 250px;
margin-left: 78%;
background: yellow;
margin-top: -300px;
}
Working CodePen is here too: https://codepen.io/WebDevelopWolf/pen/mBLqxm
Not sure why this works, but it may be helpful for you:
#div1, #div2{
width: 100%;
height: 400px;
}
#div1{
background-color: red;
position: relative;
}
#div2{
background-color: green;
}
#div2{
margin-left: 50px;
margin-top: -300px;
position: relative;
}
#div1 > div{
background-color: yellow;
position: absolute;
width: 200px;
height: 200px;
right: 0;
top: 50px;
z-index: 2;
}
.as-console-wrapper{ display: none !important;}
<div id="div1">
DIV 1
<div>INSIDE DIV 1</div>
</div>
<div id="div2">
DIV 2
</div>
Here is all you need
div {
height: 100px;
width: 100px;
background: #ccc;
position: absolute;
top: 0;
left: 0;
}
.div1{
background: #f00;
}
.div2{
top: 30px;
}
.div_child{
background: #3a2525;
left: auto;
right: 0;
width: 50px;
z-index: 1;
}
<div class="div1">
1
<div class="div_child">
child
</div>
</div>
<div class="div2">
2
</div>
I need to display single page as below:
http://s18.postimg.org/epvzomt0p/P_62343_Patron_Roca_Ebrochure_R2_01_1.png
I made working example in
https://jsfiddle.net/dipchk/pua95mwg/1/
Can any one tell me what more I need to implement in css in order to look like above image
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
css
.wrapper {
width: 90%;
height: 90%;
position: relative;
background-color: white;
}
.wrapper div {
padding: 10px;
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
display: block;
position: absolute;
width:70%;
height: 50%;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
position: absolute;
display: inline-block;
width: 15%;
height: 40%;
}
Please check this solved
body{margin:0; padding:0;background:#ddd;}
.wrapper {
position: relative;
background-color: #fff;
width:580px;margin:0 auto;
padding:40px 0;
height:500px;
}
.wrapper div {
}
#one {
}
#one img {
width:100%;
}
#two{position: absolute;
right: 0px;
top: 72px;}
#two img {
width: 166px;
}
<body>
<div class="wrapper">
<div id="one"><img src="http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png"></div>
<div id="two"><img src="http://i.stack.imgur.com/rg43a.png"></div>
</div>
</body>
You Just Remove
Position:absolute;
and Do what you want.
Thank you
It's difficult to understand exactly what you are asking.
According to the image you showed, please check the following code.
body{margin:0; padding:0;}
.wrapper {
position: relative;
background-color: #ccc;
}
.wrapper div {
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
width:580px;
height: 142px;
margin:0 auto;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
width: 580px;
height: 924px;
margin:0 auto;
}
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
I have a quick rookie-like question. I used to know CSS, but didn't after having not used it in years.....
Anyway,
I'm trying to stack two divs on top of each other. A portion of my code is below.
CSS:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_box_top {
width: 279px;
height: 200px;
float: top;
background-color:black;
}
.faq_box_bottom {
width: 279px;
height: 295px;
float: bottom;
background-color:green;
}
.faq_right {
width:783px;
height: 495px;
float: left;
background-color:yellow;
}
HTML
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
I would like faq_left on the left.
I would like faq_box_top & faq_box_bottom to be in the center, where faq_box_top is above faq_box_bottom.
I would like faq_right on the right.
Attached is my page and style sheet along with an image of what I am trying to achieve.
Thanks in advance,
You should use position instead of float as the values you have given is wrong. My way is, to position them in top, left, bottom and right, with adjusting according to the left or top 50% by giving the offset in negative margins.
Have a look at the below snippet.
.faq_left,
.faq_box_top,
.faq_box_bottom,
.faq_right {
position: absolute;
}
.faq_left {
width: 134px;
height: 495px;
left: 0;
top: 50%;
margin-top: -247px;
background-color:red;
}
.faq_box_top {
width: 279px;
height: 200px;
top: 0;
left: 50%;
margin-left: -139px;
background-color:black;
}
.faq_box_bottom {
width: 279px;
height: 295px;
left: 50%;
margin-left: -139px;
bottom: 0;
background-color:green;
}
.faq_right {
width:783px;
height: 495px;
right: 0;
top: 50%;
margin-top: -247px;
background-color:yellow;
}
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
This is how it looks in 33% zoom:
View the snippet in Full Page.
float is only: left, right, or none. There isn't a: top or bottom.
Right and left boxes have display: inline-block so that they sit next to each other.
Top and bottom boxes have clear: both so that there is nothing sitting next to them.
Top and bottom boxes have margin: 0 auto so that they are centered.
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color: red;
display: inline-block;
}
.faq_box_top {
width: 279px;
height: 200px;
background-color: black;
clear: both;
margin: 0 auto;
}
.faq_box_bottom {
width: 279px;
height: 295px;
background-color: green;
clear: both;
margin: 0 auto;
}
.faq_right {
width: 783px;
height: 495px;
float: left;
background-color: yellow;
display: inline-block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>33180711</title>
</head>
<body>
<div class="faq_box_top"></div>
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_bottom"></div>
</body>
</html>
The dimensions of the boxes are odd... is this intentional? It's unclear what you wanted with the left and right boxes...did you want them touching or did you want a space between them? If you desire the latter then change the right box to float: right
I wouldn't use absolute positioning since it may easily break your layout. Instead I would wrap the top and bottom divs inside another div, like this:
<div class="faq_left"></div>
<div class="faq_middle">
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
</div>
<div class="faq_right"></div>
And then just change the CSS a little bit:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_middle {
width: 279px;
float: left;
}
.faq_box_top {
height: 200px;
background-color:black;
}
.faq_box_bottom {
height: 295px;
background-color:green;
}
.faq_right {
width:134px;
height: 495px;
float: left;
background-color:yellow;
}
You can see it running here: https://jsfiddle.net/u83dpf7t/
two changes:
.faq_right {
width:783px;
height: 495px;
float: right;
background-color:yellow;
}
That should be right instead of left, well?
and re-order:
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
fiddle here: http://jsfiddle.net/pt8dcc1t/1/
hello I have a problem with vertical-align: middle;
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
I want to div witch has .sub class will be vertical center of .wp div. plz help me.
Sorry for my bad english.
As an alternative, you can use transform's translateY method, like
transform: translateY(-50%);
Works here: http://jsfiddle.net/r5z8gjgu/embedded/result/
vertivcal-align works with table-cell. look how it works in jsfiddle.
this is the html and css
<div class="table">
<div class="tableRow">
<div class="wp">
<div class="sub"></div>
</div>
</div>
</div>
.table {
display: table;
width: 100px;
}
.tableRow{
display: table-row;
height: 400px;
}
.wp {
display: table-cell;
background-color: tomato;
vertical-align: middle;
}
.sub {
height: 200px;
background-color: green;
}
also you can achieve this by "relative" and "absolute" positions
.wp{
position: relative;
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 20%;
background-color: red;
vertical-align: middle;
}
After looking at your questions I was curious and a quick google search gave me the following already from stackoverflow:
Vertically Aligning Divs
http://phrogz.net/css/vertical-align/index.html
http://jsfiddle.net/ktxpP/3/
In an attempt to not just provide a link answer:
The snippet below belongs to Lalit :
You can vertically align a div in other div. For this you must define css like this example on fiddle. Just see the small demo that vertically align a innerDiv in outerDiv.
HTML
My Vertical Div CSS
.outerDiv {
display: inline-flex; <== This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white; }
.innerDiv {
margin: auto 5px; <== This is responsible for vertical alignment
background-color: green; } .innerDiv class margin must be as margin: auto *px;
[* can be your desired value.]
display: inline-flex property is supported in latest(updated/current
versions) browsers with HTML5 support.
Always try to define height of vertically align div (i.e. innerDiv)
for any further compatibility issue.
.wp{
width: 100px;
height: 500px;
background-color: #000000;
display:inline-flex; <--
}
.sub{
width: 100%;
height: 20%;
background-color: red;
margin:auto; <--
}
<div class="wp">
<div class="sub"></div>
</div>
If I understand you correctly, you want something like this
.wp{
width: 100px;
height: 500px;
background-color: #000000;
}
.sub{
position:absolute;
top: 250px;
width: 100px;
height: 20%;
background-color: red;
vertical-align: middle;
}
<div class="wp">
<div class="sub"></div>
</div>
Hope that helps.
this is my solution try this
<html>
<head>
<style>
.wp{
width: 10%;
height: 10%;
float: left;
background-color: green;
border: 1px solid #00FF 00;
margin: 0.5%;
position: relative;
}
.sub
{
width: 50%;
height: 50%;
background-color: red;
position: absolute;
}
.center{
margin: 0 auto;
left: 25%;
}
.right{
left: 50%;
}
.middle {
top: 25%;
}
.bottom {
top: 50%;
}
</style>
</head>
<body>
<div class="wp">
<div class="sub center middle"></div>
</div>
</body>
</html>
I want to create a layout like this:
The left column (yellow): width 150px constant - height dynamic
The middle column (azure): width dynamic - height dynamic
The right column (green): width 150px constant - height dynamic
The footer (red): width dynamic - height constant
I'm looking for a CSS-only solution.
jsFiddle here.
http://fiddle.jshell.net/2bSaP/show/
HTML :
<div id="container">
<div id="yellow"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
</div>
CSS :
body {
margin: 0;
}
#yellow {
background: yellow;
position: absolute;
width: 150px;
top: 0;
left: 0;
bottom: 155px;
}
#blue {
background: rgb(98, 196, 255);
position: absolute;
top: 0;
right: 155px;
left: 155px;
bottom: 155px;
}
#green {
background: green;
position: absolute;
width: 150px;
top: 0;
right: 0;
bottom: 155px;
}
#red {
background: brown;
position: absolute;
height: 150px;
left: 0;
right: 0;
bottom: 0;
}
Used
now you forget position define position value in your css
as like this
#blue{
position: absolute;
}
Not sure if this is what you wanted, but I got rid of all those height rules for #Blue and just added height: 100%, then gave #Red a higher z-index (55, for instance).
Now the center square appears to always be blue.
http://jsfiddle.net/qXKZh/38/
Hope this helps
I'm really not sure what you're trying to accomplish. Is it supposed to look the way MusikAnimal's jsfiddle looks?
If so, I'd go for a different structure (complete with the right heights and widths...):
<div id="for3columns" style="height: 500px;">
<div id="yellow_column" style="float: left; width: 20%; height: 100%"></div>
<div id="blue_column" style="float: left; width: 60%; height: 100%"></div>
<div id="green_column" style="float: left; width: 20%; height: 100%"></div>
</div>
<div id="lower_red" style="clear:both; width: 100%; height: 100px;"></div>
It's a little difficult to understand what your question is, but from what I gather, I was able to get to this solution: Fiddle
HTML
<div class='container'>
<div class='col col-left'></div>
<div class='col col-mid'></div>
<div class='col col-right'></div>
<div class='col col-bottom'></div>
</div>
CSS
.container {
width: 960px;
margin: 0 auto;
}
.col {
margin: 0;
padding: 0;
float: left;
}
.col-left {
width: 25%;
height: 200px;
background: #f90a7b;
}
.col-mid {
width: 50%;
height: 200px;
background: #e3f606;
}
.col-right {
width: 25%;
height: 200px;
background: #46c704;
}
.col-bottom {
width: 100%;
height: 200px;
background: #0654e0;
}