This question already has answers here:
DIVs Arrangement - HTML CSS
(3 answers)
Closed 9 years ago.
I am trying to make two divs in the main container side by side, with bottom div should adapt to the width of the rest of the space.
<div id="container">
<div id="left">fixed width</div>
<div id="right">rest of space width</div>
</div>
#container {
float:left;
width:100%;
}
#left, #right {
padding:50px;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
}
#right {
padding:20px;
background:#000;
color:#fff;
}
I'm stuck at this stage http://jsfiddle.net/Z9qW3/7/
#container
{
overflow-x:hidden
}
#left
{
width:20%;
float:left;
position:fixed;
border:1px solid red
}
#right
{
width:80%;
float:right;
position:absolute;
left:20%;
bottom:0;
border:1px solid red
}
Try This Code:
Demo
css
#left
{
width:20%;float:left;position:fixed;left:0px;
border:1px solid yellow;
}
#right
{
width:80%;float:right;
border:1px solid red;
}
html
<div id="container">
<div id="left">fixed width</div>
<div id="right">rest of space width</div>
</div>
Hope this would help...
#container {
width: 100%;
}
#left {
padding: 50px;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
float:left;
}
#right {
padding-top: 20px;
padding-bottom: 20px;
background:#000;
color:#fff;
width: 79%;
float: right;
}
What i can get from your question is you want a fixed div on left side and the other div should take the remaining space on right and on the bottom of left div. I think a better approach would be to make a single big div and then float a fixed div on left and then you can use the remaining portion to position individual elements with css positioning property
Related
There are two situations:
1. Two divs A & B in a container side by side
2. One div A in the same container in the center
Here is an example: http://jsfiddle.net/lvil/toj9w9zz/
.container_one, .container_two {width:200px; height:100px; background-color:red;}
.container_one .inner_a {width:100px; background-color:green; float:left;}
.container_one .inner_b {width:100px; background-color:blue; float:right;}
.container_two .inner_a{width:100px; margin:0 auto; background-color:green;}
<div class="container_one">
<div class="inner_a">
a
</div>
<div class="inner_b">
b
</div>
</div>
<br>
<div class="container_two">
<div class="inner_a">
a
</div>
</div>
Let's say the containers have the same class(not like in the example).
The number of inner DIV always changes (1 or 2).
Is it possible to make css fit both situations?
I have tried many things but could not achieve this.
Try inline-block, keep this inner_a rules for both divs and remove floats.
.container_one, .container_two {
background-color: #ff0000;
height: 100px;
text-align: center;
width: 200px;
}
.container_two .inner_a {
background-color: #008000;
display: inline-block;
width: 100px;
}
The following code is the best and least:
.inner_a {
background-color: green;
display: table;
margin: 0 auto;
width: 100px;
}
.container_one .inner_a {
float:left;
}
.container_one, .container_two {
width:200px;
height:100px;
background-color:red;
}
.container_one .inner_b {
width:100px;
background-color:blue;
float:right;
}
What you want to do is use display:inline-block instead of floating and then target the divs with class .inner_a when they are the last child of the parent, like so:
.container_one>div{
display:inline-block;
width:100px;
}
.inner_a{
background-color:green;
}
.inner_a:last-child{
margin:0 auto;
}
.inner_b{
background-color:blue;
}
I know this is a drawn out question but with all the examples I could find on the net for some reason I cannot replicate.
I need 2 div boxes that are 300px; wide to be next to each other and be centered in the middle.
I have the following code
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<style>
.container {
width:100%;
text-align:center";
}
.box1 {
float:left;
width:300px;
}
.box2 {
float:right;
width:300px;
}
</style>
For whatever reason I can get the boxes next to each other but it stays on the left side of the screen instead of the center. I just need them centered
Example: http://jsbin.com/ubanuf/12/edit (not mine)
It is cause you have float: left. There are several ways to do that, you can add display: inline-block; or add margin: 0 auto;
.box1 {
float:left;
width:300px;
display: inline-block;
}
.box2 {
float:right;
width:300px;
display: inline-block;
}
Change your CSS as follow
.container {
width:100%;
text-align:center;
}
.box1, .box2 {
display: inline-block;
width:300px;
}
inline-block elements will be align with the text, if you set the text-align: center for the container div.
you have extra (") double quote at your CSS text-align: center";.
Here is an other way (there are plenty indeed!):
.container {
margin: 0 auto;
width: 100px;
}
.box1 {
width:50%;
display: inline-block;
}
.box2 {
float: right;
width:50%;
display: inline-block;
}
There is redundant space between the two child DIVs if you use inline-block, here is my solution.
container {
width:100%;
text-align:center;
font-size: 0; // hack the space
}
.container div{
font-size: 16px; // hack "hack the space"
}
.box1 {
display:inline-block;
width:300px;
}
.box2 {
display:inline-block;
width:300px;
}
you does not need to do any thing..just give box1 and box2 width in "%" or give container width in "Pixel". That will solve your problem
Like This
<style>
.container {
width:100%; //or change it to 600px
text-align:center";
}
.box1 {
float:left;
width:300px; //or change it to 50%
}
.box2 {
float:right;
width:300px; //or change it to 50%
}
</style>
Try to keep everything in "%" or "Pixel"
Thanks
See my fiddle here: http://jsfiddle.net/Waterstraal/bMfbH/2/
The HTML:
<div class="row">
<div class="actionPanel"></div><div class="resultPanel"></div>
</div>
The CSS:
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel {
display:inline-block;
width:450px;
height: 50px;
background: #ddd;
}
.actionPanel {
display:inline-block;
width:50px;
height: 50px;
background:#eee;
}
I want to "slide" the resultpanel to the right (so it's still on the same level as the actionPanel), but instead it gets pushed down out of view.
The width of the actionPanel is being made bigger in javascript so that the total width of the two elements are bigger than the width of the parent element.
Does anyone know how I can achieve the effect i'm after? I've tried to use floating elements, but that had the same result. I also tried to use a table element, to no effect.
Thank you in advance.
Add white-space: nowrap to the container of the inline-block elements, in this case .row.
http://jsfiddle.net/thirtydot/bMfbH/3/
Change css:
body {
padding:10px;
}
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel {
height: 50px;
background: #ddd;
}
.actionPanel {
float:left;
width:50px;
height: 50px;
background:#eee;
}
I want to fill the sides of a centered div with another div or span on each side.
I'm using margining to center the div as shown in this fiddle.
HTML
<div id='A>
<div id='Ad'>
</div>
</div>
CSS
#A{
z-index: 3000;
position: fixed;
width: 100%;
height: 40px;
background: rgba(0,0,0,0.05);
}
/*
div or span to the left
*/
/*
centered div
*/
#Ad{
z-index: 3000;
width: 400px;
height: 40px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
/*
div or span to the right
*/
How can I have a div that always takes up the remaining space on the left and another div that takes up the remaining space on the right.
Clarification:
Center column needs to be constant width. Left and Right Columns vary with the window size.
This would achieve what you want - it allows you to have a fixed width central div with left and right columns that fill up the remaining space:
HTML:
<div id="A">
<div id="Ad">Centre</div>
<div id="left">Left</div>
<div id="right">Right</div>
</div>
CSS:
#A {
z-index: 3000;
position: fixed;
width: 100%;
height: 400px;
background: rgba(0, 0, 0, 0.05);
}
/*
centered div
*/
#Ad {
z-index: 3000;
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
}
#left, #right {
position:absolute;
left:0;
top:0;
right:50%;
margin-right:200px;
background:#F00;
height: 400px;
}
#right {
left:50%;
right:0;
margin-left:200px;
margin-right:0;
}
The key is that the margin on the left/right is half of the central column's total width, so adjust it to take into account any borders or padding.
Working example: http://jsfiddle.net/2AztF/
I would just use 3 <div>s floated within the main container
HTML:
<div id='A'>
<div id='AdLeft'></div>
<div id='Ad'></div>
<div id='AdRight'></div>
</div>
CSS:
#A { overflow:auto }
#AdLeft { float:left; width:25%; }
#Ad { float:left; width:50%; }
#AdRight { float:left; width:25%; }
Here is a modified jsfiddle.
Make 3 divs :
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div style="clear:both"></div>
CSS:
#A,#B,#C{
float:left;
width:10%;
}
#B{
width:80%;
}
Here, B is you main div.
It is good practice to clear when you use float property.
To fill space on the right and left side of your div code use and make sure you have no margin or padding on those sides.
float:right;
float:left;
HTML:
<div class='container'>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>
CSS:
.container { overflow: hidden; margin:0; padding:0; }
.right { float: right; width: 150px; }
.center{ float: right; width:50px; margin-right: 50px; }
.left{ float: left; width: 150px; }
The margin-right of .center will fill the space accordingly.
This question already has answers here:
Setting width/height as percentage minus pixels
(11 answers)
Closed 9 years ago.
I have a parent div and 2 divs inside it. First child div is 50px wide and 100% height. Second child div is 100% height and I it to take rest of the width ( 100% - 50px ) how do I do that?
Here is the fiddle that I've created: http://jsfiddle.net/muGty/
Basically I want blue div (right ) to occupy rest of the grey container completely.
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
Do you mean like this?
<div id="left">
</div>
<div id="right">
</div>
CSS
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
margin-left: 200px;
background: #0f0;
height: 100%;
}
Update:
You can also use calc() property in CSS3, which will ease up this process like
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
float: left;
background: #0f0;
height: 100%;
width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}
Demo 2
Just change your right div to this:
.right{
float:left;
height:50px;
width: calc(100% - 50px);
background-color: blue;
display:inline-block;
}
You could add a 50px margin to right and float it.
What about editing your right class to make it look like this :
.right{
float:left;
height:50px;
width: 100%;
margin-right:-50px;
background-color: blue;
display:inline-block;
}
You could also work with an absolute position for the right side column. Consider this example:
.parent{
width:100%;
height:50px;
background:#888;
position:relative
}
.left{
float:left;
height:100%;
width:50px;
background:green
}
.right{
background:red;
position:absolute;
bottom:0;
left:50px;
right:0;
top:0
}
Also see this Fiddle. Note that you would need to set position: relative on the parent container for this to fly.