The scroll bars are shown even after I maximize the browser window (I thought there should be no reason to).
There is no height issue here, and so the vertical scrollbars should not come up right?
Can anyone shed some light?
<style>
html, body, div { margin: 0; border: 0 none; padding: 0; }
html, body,form, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { margin: 10px; overflow: hidden; width: 960px; }
#left { background: yellow; float: left; width: 360px; }
#right { background: grey; margin-left: 360px; }
</style>
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
You have #wrapper with a 10px margin and height 100%. that will automatically give you problems. Remove the 10px margin and apply that to the inner contents of wrapper.
html, body, div { margin: 0; border: 0 none; padding: 0; }
html, body,form, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { overflow: hidden; width: 960px; }
#left { margin: 10px; background: yellow; float: left; width: 360px; }
#right { margin: 10px 10px 10px 360px; background: grey; }
Just remove margin:10px from #wrapper.
#wrapper
{
/*margin: 10px; */
overflow: hidden;
width: 960px;
}
Related
I have two boxes inside my <header>-tag, which has a total width of 100%. When i align them up they fit perfect, but when i'm shrinking the window the right box jumps down beneath the left one. Here's the code:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
background-image: url('img/header.jpg');
height: 120px;
margin-right: 10px;
width: 65%;
}
#userinfo {
float: left;
height: 100px;
width: 33.2%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
</section>
<section id="userinfo">
test
</section>
</header>
Any quick fixes? Imagining this happens with the rest of my design as I'm moving forward. Thanks in advance.
The problem here is you are using some values for padding and margin on your elements and those by default are added to the actual size of the element, since both elements are 98.2% of the container +20 of the values at some point they don't fit into the 100% and will break.
To solve it you can use box-sizing property which will make the padding and border values be inside the total declared size, and since that doesn't work with margin you will need an extra container to use padding and create the separation:
header {
width: 100%;
height: 90px;
}
#head {
float: left;
box-sizing:border-box;
padding-right: 10px;
width: 65%;
}
#head > div {
background-image: url('http://placehold.it/500');
height: 120px;
}
#userinfo {
box-sizing:border-box;
float: left;
height: 100px;
width: 35%;
background-color: #202020;
padding: 10px;
position: relative;
}
<header>
<section id="head">
<div></div>
</section>
<section id="userinfo">
test
</section>
</header>
Thanks DaniP, that solved it. But what about the content and sidebars part then?:
#container {
margin: 30px auto;
width: 70%;
min-height: 400px;
}
#leftmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
#content {
float: left;
box-sizing: border-box;
width: 60%;
background-color: #202020;
min-height: 600px;
}
#content > div {
background-color: #202020;
min-height: 600px;
}
#rightmenu {
float: left;
box-sizing: border-box;
width: 20%;
min-height: 600px;
background-color: #202020;
}
I having problems with getting the scroll bars to appear inside the left and right container.
The scroll bars appears on the body at the moment.
Please see the fiddle: http://jsfiddle.net/pQq45/7/
HTML:
<div class="wrapper">
<div class="cont">
<div class="left">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
<div class="right">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.wrapper {
display: table;
background-color: yellow;
width: 100%;
height: 100%;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont{
width: 100%;
height: 100%;
background: #333333;
display: table-row;
}
.left{
display: table-cell;
width: 200px;
height: 100%;
overflow-y: scroll;
background: #FF0000;
}
.right{
display: table-cell;
width: auto;
height:100%;
overflow: hidden;
background: #00FF00;
}
.rect{
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
How can I get the scrolls to appear inside left and right containers, rather than on the body? So it would look like this:
This is a more complex layout. And you will run intro trouble using table-layout. I'd recommend you to ditch the table layout thing and use the following:
Demo: http://jsfiddle.net/pQq45/19/
html, body {
height: 100%;
margin:0;
padding:0;
}
.wrapper {
background-color: yellow;
height: inherit;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont {
background: #333333;
position: relative;
height: inherit;
}
.left {
position: absolute;
left:0;
top:0;
bottom:0;
width: 200px;
overflow: auto;
background: #FF0000;
}
.right {
position: absolute;
left: 200px;
top:0;
right:0;
bottom:0;
overflow: auto;
background: #00FF00;
}
.rect {
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
UPDATE 2
Try this
I think it's because you have height: 100%.
Try setting a pixel height and changing display: table-cell to display: block so that they'll adhere to the height.
It should look like this:
.left{
width: 20%;
background: #FF0000;
}
.right{
width: 80%;
background: #00FF00;
}
.cont {
height: 100%;
}
.right, .left {
float: left;
display: block;
height:100%;
overflow-y: scroll;
}
You are missing
overflow-y: scroll;
On .right
Here is my current code but i don't see what the problem is. I'm new to html so i'm not really sure. I'd like to have a column on the left at about 20% space, column in the center which takes 60% of the space and column on the right that takes 20% space.
#wrapper {
background-color: #788D9A;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#mainleft {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
display:inline-block;
}
#maincenter {
width: 60%;
float: left;
overflow: hidden;
text-align: center;
padding: 10px;
padding-bottom: 1000px;
margin-bottom: -1000px;
display:inline-block;
}
#mainright {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
}
You need to be mindful when using padding-left padding-right margin-left margin-right border-left and border-right when you want that type of layout.
Each of those styles affect the overall width of that element so adding a padding: 10px will actually make your div width = 20% + 20px.
If you want to have that inner padding and border style an inner div
Example: http://jsfiddle.net/b62Ju/2/
HTML
<div id="wrapper">
<div id="mainleft">
<div>L</div>
</div>
<div id="maincenter">
<div>C</div>
</div>
<div id="mainright">
<div>R</div>
</div>
</div>
CSS
#wrapper {
background-color: #788D9A;
}
#wrapper > div
{
height: 1000px;
float: left;
text-align: center;
}
#mainleft {
width: 20%;
background-color: #ABB8C0;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: #ABB8C0;
}
#maincenter > div
{
height: 1000px;
border-left: solid black;
border-right: solid black;
}
#mainleft > div,
#maincenter > div,
#mainright > div
{
padding: 10px;
}
Alternatively you could use the box-model styles:
.box
{
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
}
more info: http://www.quirksmode.org/css/box.html
The display: table properties seem like the best choice here. You get your equal height columns (I assume that's what the crazy bottom margin/padding was for), no extra markup, and padding without having to worry about adjusting the box-model (learn more about the box-model here: http://css-tricks.com/the-css-box-model/).
http://jsfiddle.net/b62Ju/3/
#wrapper {
display: table;
width: 100%;
}
#wrapper > div
{
display: table-cell;
padding: 1em;
}
#mainleft {
width: 20%;
background-color: orange;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: green;
}
For your Reference if we need to place three dives side by side,
HTML:
<div class="main">
<div class="left">...</div>
<div class="center">...</div>
<div class="right">...</div>
</div>
CSS:
.main {
width: 1000px;
float: left;
display: inline-block;
}
.left {
width : 20%;
float: left;
display: inline-block;
}
.right {
width : 20%;
float: left;
display: inline-block;
}
.center {
width : 60%;
float: left;
display: inline-block;
}
it will work.
I think in your code you need set width for main wrapper div.
Could you please give a html code for the following?
I need to display div and iframe horizontally fitting the whole page. But I need div to be fixed size (100px) and iframe fitting the remaining space.
Thanks
Fiddle
CSS
div{ border: 1px solid #f00; width: 100px; position: absolute; left: 0; top: 0;}
iframe{ width: 100%; margin: 0 0 0 100px;}
HTML
<div>hi</div>
<iframe src="http://www.google.com/"></iframe>
EDIT:
To avoid horizontal scrollbar define width in % to both the elements - Updated Fiddle
http://jsfiddle.net/gZNKk/1/
<html><head>
<style>
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#left {
float: left;
width: 100px;
background: blue;
height: 100%;
}
#right {
width: auto; /* This is the default */
float: none;
margin-left: 100px;
background: red;
height: 100%;
}
#right-iframe {
background: yellow;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<iframe id="right-iframe"></iframe>
</div>
</body></html>
EDIT: Fixed the extra spacing on the right causing the scrollbar to appear.
CSS:
#content-wrapper {
width: 100%;
overflow:hidden;
}
#content-left {
width: 49.5%;
min-height: 100%;
float: left;
border-right: solid 1px #A9D0D6;
}
#content-right {
width: 49.5%;
min-height: 100%;
float: right;
}
HTML:
<div id='content-wrapper'>
<div id='content-left'></div>
<div id='content-right'><iframe src="http://www.google.com"></div>
</div>
Width you can adjust, whatever you required.
Try this,
http://jsfiddle.net/anglimass/UUmsP/15/
I need help to fix the next layout, because:
It doesnt look right for IE
The footer doesnt stay at bottom when #columns content grows up
I need to make the #column container 100% min-height with small content
Thanks in advance!
This is my code:
<style>
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height: 100%;
}
#header {
min-width: 1000px;
width: 100%;
height: 40px;
background: red;
}
#columns {
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
position: absolute;
bottom: 0;
min-width: 1000px;
width: 100%;
height: 40px;
background: black;
}
<body>
<div id="header"></div>
<div id="columns"></div>
<div id="footer"></div>
</body>
Try this (edited) :
JSFiddle: http://jsfiddle.net/NeCc3/14/
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height:100%
}
#header {
width: 100%;
height: 40px;
background: red;
}
#columns{
min-height:100%;
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
width: 100%;
height: 40px;
background: black;
}