.div1{
background:red;
width:100%;
height:30px;
}
.div2{
background:green;
width:100%;
height:30px;
}
.div3{
background:black;
width:100%;
height:50px;
}
.div4{
background:yellow;
height:30px;
width:90%;
margin-left:25px;
text-align:left;
margin-top:-10px;
overflow:visible;
}
.div5{
background:blue;
color:white;
width:100%;
height:30px;
}
<div class="div1">
Contents of container 1
</div>
<div class="div2">
Contents of container 2
</div>
<div class="div3">
<div class="div4">
Overlay
</div>
</div>
<div class="div5">
Content of container 5
</div>
Given html and css in the followings, I would like to overlay the div2 (green color) by div4 (yellow color), let' say by half of div2's height. How can I achieve this without using absolute positioning since I have other complicated elements (for header and footer). I was trying to achieve this with negative top margin and overflow visible but still it does not work as I expect.
Please note that div2 and div4 are not from the same parent div.
Here is the HTML
<div class="div1">
Contents of container 1
</div>
<div class="div2">
Contents of container 2
</div>
<div class="div3">
<div class="div4">
Overlay
</div>
</div>
<div class="div5">
Content of container 5
</div>
and here is the CSS:
.div1{
background:red;
width:100%;
height:30px;
}
.div2{
background:green;
width:100%;
height:30px;
}
.div3{
background:black;
width:100%;
height:50px;
}
.div4{
background:yellow;
height:30px;
width:90%;
margin-left:25px;
text-align:left;
margin-top:-10px;
overflow:visible;
}
.div5{
background:blue;
color:white;
width:100%;
height:30px;
}
Related
Is it possible to put a 90 degree flip a div next to a normal horizontally?
In my example, I want the blue div ("some text") to be vertical and be next to the horizontal "bottom-right" div. Is it possible to do so while making it responsive? I don't want just the text to be flipped, I want any items I put inside that div to also be flipped.
https://jsfiddle.net/duah6svr/1/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
width:600px;
height:600px;
background:gray;
}
.top{
float:right;
height:30%;
background:red;
width:80%;
}
.bottom{
width:100%;
height:70%;
background:green;
float:right;
}
.bottom-right{
float:left;
height:100%;
width:80%;
background:pink;
}
.vertical-invert{
width:20%;
height:100%;
background:blue;
}
<div class="big-div">
<div class="top">
</div>
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
You can use a flexbox and the writing-mode attribute. Here is a working fiddle demonstrating. In case you want to change the text orienation you can use something different for writin-mode as described here
Updated version: Bottom of the text is on the left side. The trick is to set the writing-mode to vertical-lr
HTML:
<div class="big-div">
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
background:gray;
}
.bottom{
width:100%;
height:70%;
display: flex;
flex-direction: row;
}
.bottom-right{
width:80%;
background:pink;
}
.vertical-invert{
width: 20%;
background:blue;
writing-mode: vertical-lr;
text-align: left;
}
I try to connect a div to my centre div but I can't figure it out. The "connecting div" should be adjacent to the centered div, but the alignment of the centre div should not change. (It should stay in the centre.)
HTML
<div class="yelow"></div>
<div class="red"></div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin-left:auto;
margin-right:auto;
}
.yelow{
float: left;
width:100px;
background-color:#ffff00;
height:100px;
}
Here's the fiddle:
http://tinyurl.com/k2twodz
So the yellow div should be adjacent to the red centre div.
Thanks in advance!
Here you go. I also adjusted the HTML code.
http://jsfiddle.net/hrvvvz4v/4/
HTML
<div class="red">
<div class="yelow"></div>
</div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin:0 auto;
}
.yelow{
position:relative;
right:100px;
width:100px;
background-color:#ffff00;
height:100px;
}
You can also try this:
HTML:
<div class="main">
<div class="yellow"></div>
<div class="red"></div>
</div>
CSS:
.main
{
width:200px;
height:100px;
}
.red
{
width:100px;
background-color:#ff0000;
height:100px;
float:left;
}
.yellow
{
float: right;
width:100px;
background-color:#ffff00;
height:100px;
}
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
I have 4 containers within a main-container and trying to create a layout using it.
The first 3 containers are floated left and working as expected. The 4th container needs to be displayed under container-3 directly but its displayed only after the length of container-2.
How can I fix it?
Jsfiddle:
http://jsfiddle.net/prem1980/4D7ZS/10/
css
<div id ="main-container">
<div id = "container1">
container 1
</div>
<div id = "container2">
container 2
</div>
<div id = "container3">
container-3
</div>
<div id = "container4">
container-4
</div>
</div>
css
html, body{
height: 100%;
width:100%;
/*background-color:#AFEEEE;*/
background-color:white;
}
#main-container{
height:50%;
width:100%;
}
#container1{
height:80%;
width:20%;
background-color:grey;
float:left;
}
#container2{
height:90%;
width:70%;
background-color:blue;
float:left;
}
#container3{
height:60%;
width:10%;
background-color:green;
float:left;
}
#container4{
height:20%;
width:20%;
background-color:yellow;
clear:both;
}
Add float: right to your #container4. SEE THE DEMO
#container4{
height:20%;
width:10%;
background-color:yellow;
float: right;
}
And remove clear: both from it.
Put container-2, container-3, container-4 in a wrapper div. Then:
.wrapper-div {
float: left;
width: 500px;
}
It's simple wrap the div(3,4) inside the div
LIVE WORKING LINK
CSS
html, body{
height: 100%;
width:100%;
/background-color:#AFEEEE;/
background-color:white;
}
#main-container{
height:50%;
width:100%;
}
#container1{
height:80%;
width:20%;
background-color:grey;
float:left;
}
#container2{
height:90%;
width:70%;
background-color:blue;
float:left;
}
a.34{
width:10%;
float:left;
}
#container3{
height:60%;
width:10%;
background-color:green;
float:left;
}
#container4{
height:20%;
width:10%;
background-color:yellow;
float:left;
}
HTML
<div id ="main-container">
<div id = "container1">
container 1
</div>
<div id = "container2">
container 2
</div>
<div class="a34">
<div id = "container3">
container-3
</div>
<div id = "container4">
container-4
</div>
</div>
</div>
CSS
LIVE EXAMPLE :
You need to wrap Div 2 Div 3 and Div 4 inside of one Div and set the Div's attributes to float:left; in CSS. Then they will all be next to Div 1
<div id ="main-container">
<div id = "container1">
container 1
</div>
<div id="float-left">
<div id = "container2">
container 2
</div>
<div id = "container3">
container-3
</div>
<div id = "container4">
container-4
</div>
</div>
</div>
CSS
#float-left{
float:left;
}
Use this CSS fix for your #container4:
position:relative;
top:-30%; /* 30% is the height difference between #container2 and #container3 */
width:10%; /* Set it equel to the width of #container3 */
I want these empty divs to have the same height as fluid div.
http://jsfiddle.net/QLdZs/
html:
<div id="container">
<div class="buffer"></div>
<div class="buffer"></div>
<div class="buffer"></div>
<div id="content">
this is content<br/>
lalala<br/>
lala<br/>
lala<br/>
lalalalala lala la<br/>
o sole mio<br/>
</div>
</div>
css:
#container {
overflow:hidden;
}
.buffer {
float:left;
background-color:red;
width:100px;
min-height:10px;
border-right:1px solid white;
}
#content {
overflow:hidden;
background-color:green;
}
I know I can make #container {position:relative;}, and then set .buffer {position:absolute;height:100%;} but I'll have to set positions for all these buffers seperately, and set margin to #content div. Sometimes I'll have two, three buffers, sometimes none. So this is not the best way of doing it.
Do you have any good idea how can I do this?
Check this article out, I think it's what you need:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I usually just used fixed heights, though.
Quoted from the article:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
And the CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}