Simple question: I've got two divs, I want them side by side, like this:
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
float: left;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
The question is, can I have the same effect using float in only one if the divs? The specific issue is, the yellow div can contain float: left, the silver div can't. I want to achieve the same effect without using float on the silver div.
How can I achieve it?
Here's a fiddle
Use display:inline-block to achieve what you want.
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
display:inline-block;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
UPDATED FIDDLE
You can use display: inline-block for the silver div
http://jsfiddle.net/94Lxd5c4/
.details-right {
background: silver;
width: 50%;
display: inline-block;
}
Or you may just define overflow: hidden; or overflow: auto; . The behaviour of the silver div will be the same, whether you add float: left or not (it won't do any difference)
http://jsfiddle.net/ogwvjjs9/2/
.details-right {
background: silver;
width: 50%;
overflow: auto;
}
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
position : absolute;
left : 50%;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
I hope this is what you are looking for
Use display:table and display:table-cell to achieve your need.
I added one more div that will act as a table
< div class="details">
Below div act as a table cell
< div class="details-left">left< /div>
< div class="details-right">right< /div>
<div class="details">
<div class="details-left">left</div>
<div class="details-right">right</div>
</div>
html
.details { display:table; width:100%; overflow:hidden;}
.details-left {
background: yellow;
display:table-cell;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
display:table-cell;
}
css
demo: http://jsfiddle.net/ravinthranath/skuvnvqL/
Related
How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
I have two divs that I am trying to stack over each other but the one I want on top is not showing. I want the blue background div to lay on top of the red background div. Any advice? The reason why I want to overlay the blue div is because the container is a centered grid and I want the red div to be the background for the first half of the page.
JSFIDDLE
CSS
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
overflow:hidden;
position:relative;
padding: 0 10px;}
You have made the second div absolute so you don't need to give the negative value for top. The second div is hiding because you top -629px; Try making the top:0 and see. And also for your current code. Remove the overflow hidden and put z-index like this:
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
z-index:9;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
width:200px;
height:200px;
position:relative;
padding: 0 10px;
}
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: absolute;
background: red;
}
.buddy-content {
position: absolute;
z-index: 10;
background: blue;
}
<div class="buddy BlueGradient">
</div>
<div class="container">
<div class="buddy-content">
ROGER
</div>
</div>
https://jsfiddle.net/kt77cp3e/6/
just add z-index : higher to the div that you want to show on top and set z-index low to the other one ..
ant one thing your code is working good just you need to remove " top : -629px;"
that thing is not allowing blue div to be on top just it is showing at the -629 px position..!!!!
If you can update your code like this, it may solve the issue:
Demo:https://jsfiddle.net/kt77cp3e/7/
CSS:
html, body {
height:100%;
width:100%:
}
.container {
width:50%;
height:100%;
background:red;
position:relative;
}
.container>div {
position:relative;
left:0;
right:0;
}
.container>div:first-child {
top:0;
height:50%;
background:blue
}
.container>div:last-child {
bottom:0;
height:50%;
background:green
}
HTML:
<div class="container">
<div></div>
<div></div>
</div>
Update: Considering the latest updated code, I think you should remove overflow:hidden from the container styles. That should do the trick
You should set the dimension on the .container div.
CSS:
.container {
position:relative;
width:100px; //You may modify these values
height:100px
}
Demo: https://jsfiddle.net/kt77cp3e/1/
.buddy { width: 50%; height: 629px; display: inline-block; position: relative; background: red;}
.buddy-content { position: absolute; top: 0px; z-index: 10; background: blue; }
.container {max-width: 1000px; margin: 0 auto; overflow:hidden; position:relative; padding: 0 10px; position: relative;}
<div class="container">
<div class="buddy BlueGradient">
<div class="buddy-content">ROGER</div>
</div>
</div>
This brings the text "Roger" with blue background on top of the red background
Have problem. I have this code.
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I need to make two colums.
"Sidebar" must have fixed width 200px;
And "content" all remaining width to fullscreen.
I cant change the structure of html code, just css.
if absolute position is ok, you can use it to say left:200px; right:0 and get all the space you need
fiddle : http://jsfiddle.net/h2udmqhn/
.main {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 200px;
background: blue;
}
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
Use float: left for .sidebar and left margin for .content:
.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}
http://jsfiddle.net/orty5qtj/1/
Another option is to use calc, which is unsupported in IE8. The solution above works fine in all browsers.
Try this :
.sidebar {
float: left;
min-height: 50px;
background: red;
width: 200px;
}
.content {
background : yellow;
margin-left: 200px;
min-height: 50px;
}
https://jsfiddle.net/Saiyam/5krmkkkx/3/
There a couple of simple ways to do this without the need for calc, margins or absolute positioning. Both of the following ways have the added bonus of keeping the columns the same height as each other
Using display table (compatible to back ie8)
.main {
display: table;
width: 100%;
}
.main > div {
display: table-cell;
}
.sidebar {
width: 200px;
background: blue;
}
.content {
background: red;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Using flex (for newer browsers only unless used with the browser prefix):
.main {
display: flex;
width:100%;
max-width:100%;
}
.sidebar {
width: 200px;
flex: 0 0 200px;
background-color:blue;
}
.content {
background-color:red;
flex: 1 0 auto;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main div does not have the proper height to englobe the inner divs.
Here is the HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
</div>
and the CSS:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
float: left;
}
#b {
background: green;
float: right;
}
Here is the JsFiddle: http://jsfiddle.net/mPH4H/
I should see a red frame, but there is none.
The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add overflow:auto to your CSS rules for #frm to bring the background back and "contain" the floated children:
#frm {
background: red;
width: 100%;
height: auto;
overflow:auto;
}
jsFiddle example
overflow:hidden; will give height to #frm
Try:
#frm {
background: red;
width: 100%;
height: auto;
overflow:hidden;
}
DEMO here.
OR
Clear floats:
HTML:
<div id="frm">
<div id="a">aaa<br>aaa</div>
<div id="b">bbb</div>
<div class="clr"></div>
</div>
CSS:
.clr{clear:both;}
DEMO here.
i think this is worked as fine:
#frm {
background: red;
width: 100%;
height: auto;
}
#a {
background: blue;
width: 50%;
float: left;
}
#b {
background: green;
width: 50%;
float: right;
}
I have a vertical parent container div with fixed positioning and height in pixels. I have child divs with same width as the parent. How do i stack these child divs inside the fixed parent? I am uanble to get through. please help.
If you want to do it statically, just set each child div's top property how you want it.
So if those child divs are 50px in height
#child1{
position:relative;
top:50px;
}
#child2{
position:relative;
top:100px;
}
and so on
They should already be stacked. Could you elaborate on your problem?
HTML
<div id="container">
<div class="stack one"></div>
<div class="stack two"></div>
<div class="stack three"></div>
</div>
CSS
#container {
width: 250px;
}
.stack {
width: 250px; height: 100px;
}
.one { background: red; }
.two { background: green; }
.three { background: orange; }
jsFiddle
Updated -
After reading your reply, I've now updated the CSS - jsFiddle
CSS
#container {
position: relative;
width: 250px; height: 300px;
}
.stack {
position: absolute;
width: 250px; height: 100px;
}
.one { background: red; bottom: 0; }
.two { background: green; bottom: 100px; }
.three { background: orange; bottom: 200px; }