I have this structure for my website as below. How do I define red area as 100%, while it has a sidebar with 260px width and the sidebar is fixed.
If you can use CSS3 you can use calc:
#wrapper {
width: calc(100% - 260px);
}
#sidebar {
width: 260px;
}
#sidebar {
position: fixed;
width: 260px;
}
#wrapper {
width: 100%;
box-sizing: border-box;
padding-left: 260px;
}
Please see if this will work for you:
Demo: http://jsfiddle.net/dDULw/2/
HTML
<div id="outer">
<div id="sidebar">
sidebar
</div>
<div id="wrapper">
wrapper
</div>
</div>
CSS
#outer {
overflow: hidden;
border: 3px solid #000;
width: 600px;
height: 300px;
}
#sidebar {
float: left;
border: 5px solid blue;
width: 130px;
height: 250px;
}
#wrapper {
overflow: hidden;
border: 5px solid red;
height: 250px;
}
Related
I have a web page index2.html whose height is 100%. It has 3 div: 1st one's height is 20%, 2nd one's height is 70% and 3rd one's height is 10%.
This is its whole HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
</body>
</html>
When I display the web page on a browser (IE 11 and Chrome), a vertical scroll bar is showing up. I dont understand why there is a vertical scroll bar when the height of page is 100% set and the sum of height of 3 div (20% + 70% + 10%) is also 100%. Why this is happening? How can I fix this issue?
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
JSFIDDLE
For two reasons
The body has a default margin that you'd need to eliminate with body {margin:0}
The the other issue is that your borders factor into the size of your elements and increase the height. You can fix this by adding div {box-sizing:border-box}
jsFiddle example
Your problem in your example was the body margin (default in most browsers) and the borders which made the divs width 100% + 2 pixels (border on left and right) and the height was affected the same way.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#div_header {
width: 100%;
height: 20%;
background-color: blue;
}
#div_middle {
width: 100%;
height: 70%;
background-color: red;
}
#div_footer {
width: 100%;
height: 10%;
background-color: green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
EDIT:
And yes you could also set box-sizing:border-box; in your css to fit the borders in the 100% div. This along with setting margin: 0; to your <body> element would be the correct way to go in fixing your issue.
You can also read about box-sizing here
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
In my case,
* {
overflow: hidden;
}
This worked.
The reason for the scroll bar is because you are not accounting for the box model. The percentages do not account for margin, or borders. So by adding a 1 px border and not removing the margins, the percentages will make the boxes slightly taller the the view screen.
Try this.
*{
margin: 0;
}
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
background-color: #23408;
}
#div_middle {
width: 100%;
height: 70%;
background-color: #444;
}
#div_footer {
width: 100%;
height: 10%;
background-color: #123854;
}
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
Hi i has created this simple design:
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 11%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
<div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
But when I see the result, the divs which are in the term div have some space between each other. Setting the padding and margin to zero doesn't remove the space.
What should I do to remove the space to set the divs exactly near to each other?
One solution is to use in term container display: flex:
body {
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel {
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#audio {
width: 100%;
height: 11%;
background-color: red;
}
#term {
width: 100%;
height: 11%;
background-color: blue;
display: flex;/*Add display flex*/
}
#content {
width: 100%;
height: 67%;
background-color: green;
}
#footer {
width: 100%;
height: 11%;
background-color: pink;
}
.term {
background-color: black;
height: 100%;
width: 25%;
display: inline-block;
border-right: solid red;
}
.term:first-child {
margin-left: 0;
}
.term:last-child {
border-right: none;
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
<div class="term">asd</div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
Reference
flex
the problem is that Inline-block have some default spaces ,
use Float to left better than Inline-block and use a clearfix class :
#term{
width: 100%;
height: 11%;
background-color: blue;
**overflow: hidden;**
}
.term{
background-color: black;
height: 100%;
width: 25%;
**float : left ;**
border-right: solid red;
}
http://jsfiddle.net/n0zxmgoy/
As stated earlier, any white space between inline blocks is retained in the layout, so one way
of getting rid of it is to make sure that the inline block elements have no intervening space
in the HTML mark-up.
Also, you need to set a reference height so that the height percentage values work as expected.
I did this by adding height: 100% to the html and body tags.
Also, make sure to add a height value to the #header element, which makes the arithmetic
a bit easier to deal with.
A subtle point involves the right border on the .term elements. You can either use the
CSS calc value or box-sizing: border-box, you can try either.
html, body {
height: 100%; /* this may be needed... */
}
body{
background: url("../imgs/bg_pattern.gif") scroll 0 0% repeat, url("../imgs/1.jpg") no-repeat scroll 0 0% / 100% 100%;
margin: auto;
}
#panel{
height: 100%;
width: 300px;
background-color: #232325;
float: right;
}
#header {
width: 100%;
height: 22%;
}
#audio{
width: 100%;
height: 11%;
background-color: red;
}
#term{
width: 100%;
height: 50%;
background-color: blue;
}
#content{
width: 100%;
height: 67%;
background-color: green;
}
#footer{
width: 100%;
height: 11%;
background-color: pink;
}
.term{
background-color: black;
height: 100%;
width: calc(25% - 2px);
/* box-sizing: border-box; optional alternative */
display: inline-block;
border-right: 2px solid red;
}
.term:first-child{
margin-left: 0;
}
.term:last-child{
border-right: none;
width: 25%; /* you need to consider this... */
}
<div id="panel">
<div id="header">
<div id="audio"></div>
<div id="term">
<div class="term"></div><div class="term"></div><div class="term"></div><div class="term"></div>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
I looked through many posts and still can't get this one to work...
My goal is to style css only (no javascript) so that the height of DIV class "two" always fit into the DIV class "container".
The container DIV's height could change like window resize that is why I would like my "two" DIV to be able to change the size accordingly. So I set the container DIV height to 300px here but it could be any px like 500px etc
Please let me know if you need more clarification. Thanks in advance!
http://jsfiddle.net/pn9Qa/
HTML
<div class='container'>
<div class='top'>some text</div>
<div class='bottom'>
<div class='one'>header</div>
<div class='two'>items here</div>
</div>
</div>
CSS
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
}
.top
{
height: 60px;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
Here's one using calc():
width: -webkit-calc(100% - 60px); /* note, the space is necessary */
Here's one using display: flex
display: -webkit-flex;
-webkit-flex-direction: column;
Here's one using padding/margins and z-index:
box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;
Then, the old, do some math yourself version.
Brevity on prefixes used. Use http://caniuse.com/ if you need to see which ones are necessary.
Add "overflow: hidden;" to the .container rule, like this: http://jsfiddle.net/pn9Qa/2/
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
overflow: hidden;
}
Do you need this: http://jsfiddle.net/pn9Qa/1/
html, body { height: 100%; }
.container
{
height: 100%;
width: 100%;
border: 3px solid red;
}
.top
{
height: 100%;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}