I have two divs inside a parent div.
both divs will occupy complete width of its parent.
first div has fixed height and I don't want to give height for second div, it should automatically occupy remaining height of the parent[I want to do this in css only].
below is jsfiddle link:
http://jsfiddle.net/x3ebK/3/
here is the html code:
<div id="content">
<div id="col1">content</div>
<div id="col2">content</div>
</div>
I need help in this.
I have updated the js fiddle below in below, I want "col2" to occupy remaining height of content div
http://jsfiddle.net/x3ebK/32/
It is convenient to use display:table rather than float like this:
DEMO : http://jsfiddle.net/x3ebK/28/
HTML:
<div id="content">
<div>
<div id="col1">content</div>
<div id="col2">content<br /><br /><br />content</div>
</div>
</div>
CSS:
#content {
height:auto;
position: relative;
width:300px;
background:#ccc;
color:#fff;
display:table;
}
#content > div{
display:table-row;
}
#col1 {
width: 30%;
background:#ff0000;
display:table-cell;
}
#col2 {
width: 70%;
background:#000fff;
display:table-cell;
}
You might want to read this article :
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Hope this helps.
Is this what you are trying to achieve?
Have a fiddle!
CSS
html,body { height: 100%; }
#content {
height:100%;
position: relative;
width:300px;
float:left;
background:#ccc;
color:#fff;
}
#col1 {
width: 30%;
background:#ff0000;
float:left;
height:50px;
}
#col2 {
width: 70%;
float:right;
background:#000fff;
height:100%;
}
Try applying:
position: absolute; and height: 100%; to #col1
and
height: 100%; to #col2
Here is the updated fiddle: http://jsfiddle.net/nqYAp/
Try This#container{ height:100%}#col2{ height:inherit}
Related
How can i have a fixed header with a vertical scroll-bar for my each column.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">Title 1</div>
<div class="col-sm-4">Title 2</div>
<div class="col-sm-4">Title 3</div>
</div>
</div>
Below is my css...
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:#e5e5e5;
}
.container {
display:table;
width: calc(100% - 260px);
border-spacing:1.5em;
}
.row {
display:table-row;
}
.col-sm-4 {
display:table-cell;
background:white;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
}
.secondary-aside{
width:260px;
background-color:#E1E1E1;
height:100%;
right:0px;
position:fixed;
}
Below is my codepen
http://codepen.io/anon/pen/lqfxt
The overflow property only applies to block and inline-block elements. In order to show the scroll bar, you'll need to change the display property from table-cell to one of the two aforementioned display properties, and then add an overflow property. You'll also need to set a specific width/height in this case.
In order to fix the header to the top, simply apply position: absolute; to the header element and give your columns a margin-top to equal the header height:
.col-sm-4 {
display: inline-block;
width: 150px;
height: 600px;
background:white;
overflow-y: visible;
margin-top: 60px;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
position: absolute;
}
Example CodePen
I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green;
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
Edit
Classically, this would look like this:
CSS:
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
#div3 {
float:right;
width:400px;
height:200px;
background-color: green;
}
HTML:
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
DEMO: http://jsfiddle.net/NicoO/5AJkn/
P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.
If your browser support calc, you coudl try:
#div2 { float:left; width:calc(100% - 800px); height:200px; }
Add the margins too, if any.
<style>
.box{display: table;width: 100%;}
#div1{width:400px; height:200px;background: #000;display: table-cell}
#div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
#div3{width:400px; height:200px;background: #000;display: table-cell}
</style>
<div class="box">
<div id="div1"></div>
<div id="div2">ds</div>
<div id="div3"></div>
</div>
It is the same questions that :
Positioning two divs, one with fixed width(left div) and other in percentage(right div)
Two divs side by side, one with google map and second with fixed width
This Codepen fix your problem
Apply position: relative for their parent (if it is not positioned already) and
apply the following to div2:
#div2{
position:absolute;
left:400px; /* width of div1 */
right:400px; /* width of div3 */
height:200px;
}
JSFiddle
You can use css3 calc() function if older browser support is not an issue.
#div2{
display:inline-block;
width: calc(100% - 800px); /*100% - width of div1 and div3 */
height:200px;
}
JSFiddle
I am trying to get three divs lined up beside each other. the left div has a fixed width, the middle has a percent width, and the third should take up the remaining space. Here is the code I have come up with:
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
background-color:#CCC;
height:40px;
}
I have made the two left divs transparent so you can see that the background of the right div extends all the way to the left of the page. How can I fix this? I have tried floating the right div however it doesn't fill the rest of the space. here is a fiddle I used.
The easiest solution would be to just wrap the 3 div Elements in a container, like this:
<div id="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
And then just make the child elements display: table-cell and the parent display: table and width: 100%.
#left, #middle, #right {
display: table-cell;
}
#container {
display: table;
width: 100%;
}
I order to force the #left Element to keep it's width even when there is very little space, I'd suggest to also add min-width: 200px to it's CSS.
Demo: http://jsfiddle.net/eMbV7/11/
S.B. provided a great answer, but here's an alternative method just for fun. You could have everything display:block; like normal, then float:left;, and use calc() to get the width of the final column. It would just be 100% - 55% - 200px, or compressed, 45% - 200px.
Benefit to this is that you don't need to have the #container. Potential issue is browser support, mostly mobile browsers. See: http://caniuse.com/calc
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#container {
width: 100%;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float:left;
background-color:#CCC;
height:100px;
width:calc(45% - 200px);
}
Demo: http://jsfiddle.net/eMbV7/9/
Use this code, I have wrapped all div in a container div.
<div class="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
& css
.container{
display:block;
padding:0 0 0 200px;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
margin:0 0 0 -200px;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float : right;
width: 45%;
background-color:#CCC;
height:40px;
}
Here is jsFiddle link DEMO
I would like to use height:50%, but the container's height is not defined, what's the correct solution?
<div id="container">
<div id="left-50">
<div id="left-50-1">1</div>
<div id="left-50-2">2</div>
</div>
<div id="image">
<img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg">
</div>
</div>
#container {
overflow:hidden;
}
#left-50 {
float:left;
}
#left-50-1 {
height:50%;
width:50px;
background:yellow;
}
#left-50-2 {
height:50%;
width:50px;
background:purple;
}
#image {
float:left;
}
Jsfiddle url: http://jsfiddle.net/XqMDF/
the correct solution is to define container height.
or refer to the body or other defined element.
make container display:inline-block; to adjust to image height ... or define a fixed height.
DEMO: http://jsfiddle.net/XqMDF/2/
Point is: add position: relative; to #container, and position: absolute; to elements with height: 50%;. Also, apply display: block; to image. Then add left margin on #image. Value of that margin is width of elements with height: 50%; (50px in your example).
Here is demo with all properties.
http://jsfiddle.net/XqMDF/1/
Just how can I make my page look like this:
When the left, and right (the upper divs
When A and B's height is unknown (well, the one who has most content will decide on how down below C is)
Thanks in advance
I would make the sections percentages, that way you get these proportions no matter what screen size the user has.
CSS
#sectionA
{
float:left;
width: 20%;
}
#sectionB
{
float:left;
width: 80%;
}
#sectionB
{
clear:both;
width: 100%;
}
HTML
<div id="sectionA"></div>
<div id="sectionB"></div>
<div id="sectionC"></div>
http://jsfiddle.net/AHk78/
HTML
<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>
CSS
#upleft { width:100px; height: 500px; background:red; float:left; }
#upright { width:300px; height:200px; background:blue; float:left }
#below { height:300px; width:100%; background:green; clear:both }
CSS:
#divA
{
float:left;
width: <width of div A>;
}
#divB
{
float:left;
width: <width of div B>;
}
#divC
{
clear:both;
}
HTML:
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
You can make it inline with following example for right alignment:
<div style="width:30%;float:right"><!--write your required tags--></div>
Here width and float varies depending on the requirement
Something like this:
A
float: left
B
float: left;
C
clear: both;
Hi you can make this simply as like this
Css
#left {
width:100px;
min-height: 300px;
background:red;
float:left;
}
#right {
min-height:200px;
background:blue;
float:left;
width:400px;
}
#bottom{
height:200px;
background:green;
clear:both;
}
HTML
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
Live demo link here http://jsfiddle.net/rohitazad/AHk78/2/