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 */
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;
}
.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;
}
Is that possible to do that only with HTML and CSS? Of cource, screen width can be various.
Yes you can do this with display:table property. write like this:
.parent{
width:100%;
display:table;
}
.parent div{
display:table-cell
}
.middle{
width:300px;
background:red;
}
.left{
background:green;
}
.right{
background:yellow;
}
Check this http://jsfiddle.net/QUVeq/
You can do it like in that example
http://jsfiddle.net/HCFpE/
add the width: auto; to your #left and #right css
<style type="text/css">
#wrapper{
width:100%;
float:left;
}
#left{
width:20%;
float:left;
}
#center{
width:60%;
margin:0 auto;
}
#right{
width:20%;
float:right;
}
</style>
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>