In code below I have set the width of page to 980px and there appears some whitespace at right side, which disappears on setting body width to 1050px. My screen resolution is 1366x768, I have read that most websites have 950px to 980px width and most websites like facebook entirely fit into my screen then why my 980px is having whitspace at right side.
body {
width: 980px;
overflow: scroll;
}
#container {
width: 100%;
}
.one {
height: 200px;
float: left;
border: 1px solid red;
width: 25%;
box-sizing: border-box;
}
.two {
height: 200px;
display: inline-block;
border: 1px solid blue;
box-sizing: border-box;
width: 50%;
}
.three {
height: 200px;
float: right;
border: 1px solid green;
box-sizing: border-box;
width: 25%;
}
<div id="container">
<div class="one">this is first block
</div>
<div class="two">the content changes it's position on zooming in
</div>
<div class="three">Is there any way to keep it as it is with a scroll bar
</div>
</div>
Have you tried setting the margin of html or body to 0?
Like:
html, body {
margin: 0;
}
JSFiddle
EDIT: The white space is a margin that is set as default for html, so if you want your page to be "borderless", you simply need to set the margin of html (and to be safe that of body, you never now what different browsers will do) to 0.
try unsetting width see what happens. I don't set page width on anypage I make and It works fine. now If I have a box a table a shadowbox ect ill set dimensions for that but I dont ever designate a page width. Maybe just comment it out refresh see what happen.
Related
Here is a simple block of code:
<style type="text/css">
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
}
</style>
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
But, the results are different when viewed in different screen widths.
Here, the child div completely fits the parent div at a certain screen width.
But here, when at a different screen width, a white space of about 1px appears on both the sides of the child div.
How can I get rid of this white space and make sure that the child div completely fits the parent div?
The issue lies with the border you've used and the way browsers handle this. Setting the box-sizing to border-box solves this issue. It's a common one but once you know it you'll be able to better spot it.
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
margin: 0;
}
<!DOCTYPE html>
<div class="parent">
<div class="child"></div>
</div>
Also, you don't need to define text/css in your tags these days, browsers know what the code is. Also try not to use it inline unless it was just for this question. Similarly, the <center> tag has been depreciated which means it's no longer supported in HTML 5 so you should center things using margin or flex. Margin is the easiest so that's why I've added that here.
Sometimes browsers will treat things differently in quirks mode too, so make sure you have a doctype declaration.
This is because you are using Chrome browser.
I have the same behavior with the very simple code:
<div class="container">
<div class="item-a">item A</div>
</div>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
width: 500px;
height: 500px;
border: 5px solid black;
background-color: cornflowerblue;
}
.item-a {
width: 300px;
height: 140px;
background-color: orange;
border: 3px solid crimson;
}
At 100% zoom it has a gap. When I zoom, the gap disappears, but when I zoom again - the gap between container and item-a may or may not show up again (you can notice cornflower background of 1px between a parent and child borders).
This is how Google Chrome handles things in both Linux and Windows 11 at the moment.
Then I gave a shot to view the same code via Firefox and there is no gap regardless of zooming.
Contrary to the many answers suggesting to set box-sizing: border-box, I used content-box instead and it fixed my issue: box-sizing: content-box
Try set child with the same width: 75vw;
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 75vw;
height: 100px;
background-color: #999;
}
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
I have a 3 column layout which I'm creating using inline-block divs. The left and right columns are fixed widths but the inner column is to hold dynamic content and should expand horizontally as required by it's content width.
That's easy enough... the tricky part is that when the browser window is smaller (horizontally) than the width of the left, right and expanded middle divs, I would like the middle div to scroll and the side columns to stay fixed. In other words, the middle div's size should shrink and grow with window resize but should not grow beyond the available space.
Simply laying out the divs looks like this
https://jsfiddle.net/xzjp5xef/1/
HTML:
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
<div id="spacer">
150px spacer
</div>
</div>
<div id="rightcol">
right
</div>
</div>
CSS:
div {
height:200px;
border-style:solid;
display: inline-block;
border-width: 1px;
vertical-align: top;
}
#container{
white-space: nowrap;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
margin: 10px;
height: 20px;
}
#rightcol {
background-color: red;
width:100px;
}
The point of the "spacer" div is to represent the dynamic content which in this case I've fixed to 150px plus padding. So in this case I want the divs to lay out the way they do in the above fiddle, but then when the window is shrunk horizontally, I want the middle div to scroll and the left and right divs to remain fully visible.
That fails because then the window gets a scroll bar but the middle panel remains the same width and the right hand div disappears into the scrolled region.
My next attempt was using absolute positioning
https://jsfiddle.net/n4zrLqh2/
I fixed the left div to the left and the right div to the right and set the middle div's right and left properties. This is a neat trick which allows the middle div to stretch and take up all available space. This works nicely but doesn't create the effect I'm after when the window is big - because I don't want the middle column to expand further than is necessary to contain its content.
In the end I've solved this with javascript but would much prefer a CSS solution.
Edit: To help others see what I'm trying to achieve, here's the complete javascript solution (which I'd prefer to achieve with pure CSS):
HTML:
<div id="lcol">left</div>
<div id="midcol">
<div id="spacer">150px spacer</div>
</div>
<div id="rightcol">right</div>
CSS:
div {
height:200px;
display: inline-block;
vertical-align: top;
margin: 0px;
float:left;
}
body {
white-space: nowrap;
margin:0px;
max-height: 200px;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
height: 20px;
background-color: gray;
margin: 5px;
}
#rightcol {
background-color: red;
width:100px;
}
JAVASCRIPT (with jquery)
function adjustSizes() {
// Sizes of middle divs are dynamic. Adjust once
// built or whenever the viewport resizes
//
var $leftDiv = $('#lcol')
var $milddleDiv = $('#midcol');
var $rightDiv = $('#rightcol');
// 1. Resize middle div to available viewport space
var maxBodyWidth = $(window).innerWidth() - ($leftDiv.outerWidth() + $rightDiv.outerWidth());
$milddleDiv.css('maxWidth', maxBodyWidth);
}
$(window).resize(function () {
adjustSizes();
});
And the fiddle: https://jsfiddle.net/bjmekkgj/2/
I think setting max-width of spacer will solve your problem in case content increases.
Set max-width to calc(100vw - 200px) if all margin and padding are 0. Otherwise adjust the value 200px taking margin, padding into account.
I have created a plunker. Please check if it solves your issue. Try checking after running plunker in spearate window
http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview
For the one example you provided, since the left and right columns are positioned absolutely, you should take up the space somehow. I used padding on the middle column, then nested a "content" block inside that represents the visible part of the middle column. Then, I put overflow-x: auto; on the new content block and set a max-width on the overall container to force the new block to shrink.
(In previous edits, I was attempting to do this same thing but with floats instead of absolutely positioned divs)
* { margin: 0px; padding: 0px; }
#container {
box-sizing: border-box;
display: inline-block;
position: relative;
max-width: 100%;
border: 1px solid black;
height: 200px;
}
.column {
box-sizing: border-box;
height: 100%;
}
#left {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-right: 1px solid black;
background: blue;
}
#mid {
border: none;
padding: 0px 100px;
}
#mid > .content {
box-sizing: border-box;
background-color: yellow;
overflow-x: auto;
height: 100%;
}
#spacer {
width: 150px;
height: 20px;
}
#right {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-left: 1px solid black;
background: red;
}
<div id="container">
<div id="left" class="column">
left
</div>
<div id="mid" class="column">
<div class="content">
<div id="spacer">
150px spacer
</div>
</div>
</div>
<div id="right" class="column">
right
</div>
</div>
...and in JSFiddle form
flexbox can do that.
div {
border-style: solid;
border-width: 1px;
}
#container {
height: 200px;
display: flex;
}
#lcol {
background-color: blue;
width: 100px;
}
#midcol {
background-color: yellow;
flex: 1;
overflow-x: auto;
}
#rightcol {
background-color: red;
width: 100px;
}
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
</div>
<div id="rightcol">
right
</div>
</div>
JSfiddle Demo (showing overflow effect).
Support is IE10 and up.
Try setting the middle div to have a max width with a percentage so it will get thinner with the screen size:
.midcol {
max-width: 25%;
}
I put a value for the max-width in there for an example, but you can change the value.
I think the two states shown in the image are self-explanatory. The red lines have the same height, the blue bars have the same dimensions.
How can I achieve this layout? My attempt so far (may be used for testing): http://jsfiddle.net/n6zYE/
The doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> but could be changed to <!DOCTYPE html>.
The problem is, that I see no way to keep the red line the same height when the content gets bigger while still having no scrollbar when the content is small enough.
The restrictions are only, that I do not want to use anything that is supported by less than 90% of the users. For example box-sizing luckily is supported by ~93% of the users.
EDIT: I need a box-shadow on the black area, so overlays will not solve the problem. But besides this, Nulen made a working example (http://jsfiddle.net/n6zYE/2/) of how it shall behave.
You can do it dirty way with black divs as black margins with content like this:
#content {
min-height: 100%;
background: grey;
color: white;
width: 500px;
margin: 0 auto;
padding: 20px 0 70px 0;
box-sizing: border-box;
}
http://jsfiddle.net/n6zYE/2/
modify height of #inside div to test for different content.
EDIT: done with calc():
http://jsfiddle.net/n6zYE/9/
EDIT: done with overflow: auto;:
http://jsfiddle.net/n6zYE/10/
(note: this does not work entirely for my IE11) //nulen
I'm not 100% sure if this is what you require but give this a try
#foot { position:fixed;left:100px;}
#content {height:500px;overflow:hidden;
You will need to put position:relative around the containing div and also change the height accordingly on content div.
Typically you would wrap the actual content in a container that is set up to scroll. That way you can control the wrapper's height, and its content will scroll within it.
<div id="#bodyContent">
<div id="#wrapperThatScrolls" style="overflow-y:auto" >
<p>Content</p>
</div>
// Your red margin would appear here
</div>
Solution, using display: table, display: table-row and display: table-cell:
html { height: 100%; }
body {
background: green;
padding: 0;
margin: 0;
height: 100%;
}
#inside {
border: 2px solid white;
height: 200px;
}
#topcontentrow, #bottomcontentrow {
display: table-row;
height: 20px;
}
#contentrow {
display: table-row;
background: grey;
box-shadow: 0px 0px 20px 0px #000;
}
#content {
display: table-cell;
padding-bottom: 40px;
color: white;
}
#contenttable {
display: table;
height: 100%;
width: 500px;
margin: 0 auto;
}
#foot {
height: 40px;
position: relative;
margin: -60px auto 0;
background: blue;
width: 500px;
}
<div id="contenttable">
<div id="topcontentrow"></div>
<div id="contentrow">
<div id="content">
<div id="inside">
</div>
</div>
</div>
<div id="bottomcontentrow"></div>
</div>
<div id="foot">
</div>
Tested and working in FF 31.0 and IE 11
The display: table is supported widely.
I'm creating two columns that I want to fill the page. Very simple. However, I'm getting a very slight vertical scrollbar. Setting margin: 0 and padding: 0 on the html and body didn't fix it.
I've looked into overflow: hidden but I don't like it. I also looked into placing a clear:both div at the bottom, but that didn't do anything. I've looked into using min-height, but I can't seem to get it to work properly.
I have two questions:
Why is that vertical scrollbar appearing?
How can I remove the vertical scrollbar?
Live Example: http://jsfiddle.net/XrYYA/
HTML:
<body>
<div id="palette">Palette</div>
<div id="canvas">Content</div>
</body>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#palette {
float: left;
width: 300px;
height: 100%;
border: 1px solid black;
}
#canvas {
margin-left: 300px;
height: 100%;
border: 1px solid blue;
}
It's because of the 1px borders on each side of the element.
100% + 2px border(s) != 100%.
You could use box-sizing to include the borders in the height of the element.
jsFiddle example
div {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Alternatively, you could use calc() to subtract the 2px.
height: calc(100% - 2px);
jsFiddle example
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.