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;
}
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
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;
}
.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;
}
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;
}
I need to arrange three columns of divboxes with 33% width of the outer box, besides a fixed-width menu.
http://jsfiddle.net/uvw5c/1/
So i want the red, yellow, green area beides the orange menu, in ANY case of width of #menu.
<div id="container">
<div id="menu">
menu
</div>
<div id="dialogbox">
<div id="outer">
<div class="inner" style="background-color:red;">
col1
</div>
<div class="inner">
col2
</div>
<div class="inner" style="background-color:green;">
col3
</div>
</div>
</div>
</div>
#container{
width:500px;
background-color:grey;
height:300px;
}
#menu{
width:300px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
float:left;
height:100%;
width:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33%;
background-color:yellow;
height:100%;
float:left;
}
Thanks in Advance for any hints!
For this specific case you can do away with a lot of the markup and use display: table; and table-cell;. Set the width of the menu, and the others will automatically fill the rest equally.
HTML:
<div id="container">
<div id="menu">
menu
</div>
<div class="inner" style="background-color:red;">
test
</div>
<div class="inner">
test
</div>
<div class="inner" style="background-color:green;">
test
</div>
</div>
CSS:
#container{
width:500px;
display: table;
height: 300px;
}
#menu{
width: 100px;
background: #00f;
display: table-cell;
}
.inner{
padding:0;
margin:0;
background-color:yellow;
height:100%;
display: table-cell;
}
Fiddle: http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/
Make a div containing both the menu and the .inner elements.
Also check that width of inner must be 33.3% and 33.4% for one element (maybe the one in the middle)
I found a solution with the help of a friend:
http://jsfiddle.net/t39yV/2/
its very smart to use margin-left on the #dialogbox ;)
#container{
width:100%;
background-color:grey;
height:300px;
}
#menu{
width:100px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
margin-left:100px;
height:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33.3%;
background-color:yellow;
height:100%;
float:left;
}