I have a problem, how i can fix blocks?
Block Sidebar
.sidebar {
display: block;
width: 250px;
float: left;
height: 100%;
background-color: #2b2b2b;
margin-right: 15px;
}
Block Content
.content-panel {
margin-right: 15px;
margin-top: 15px;
}
Problem:
image
How i can fix content block? I have to make sure that the unit does not take into account the width of the sidebar, while its width is 100%, and sidebar 250px
use
.content-panel {
width: calc(100% - 280px);
margin-left: 265px;
margin-right: 15px;
margin-top: 15px;
}
That width subtracts the width of the sidebar and all the margins from 100%, the margin-left moves it to the right.
You can also use just margin-left to get content block width 100% - 250px:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sidebar {
background: lightblue;
float: left;
height: 100vh;
width: 250px;
}
.content {
margin-left: 250px;
padding: 16px;
height: 100vh;
background: gold;
}
<div class="sidebar"></div>
<div class="content">Content</div>
Related
I want to display an expandable div (width: 100%) with margins...
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 300px;
margin: 10px;
}
<div id="page">
<div id="margin">
"some content here"
</div>
</div>
You can use calc() css function (browser support).
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: calc(100% - 10px);
height: 300px;
margin: 10px;
}
Alternatively, try using padding instead of margin and box-sizing: border-box (browser support):
#page {
background: red;
width: 100%;
height: 300px;
padding: 10px;
}
#margin {
box-sizing: border-box;
background: green;
width: 100%;
height: 300px;
}
Sometimes it's better to do the opposite and give the parent div padding instead:
LIVE DEMO
What I did was change the CSS of #page to:
#page {
padding: 3%;
width: 94%; /* 94% + 3% +3% = 100% */
/* keep the rest of your css */
/* ... */
}
Then delete the margin from #margin
Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%; and change the height:280px; to add up to 300px again.
You can use the following CSS to achieve the desired result:
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
The correct way to achieve this by standard is:
#margin {
background: green;
height: 280px;
margin: 10px;
width: auto;
display: block;
}
For LESS users only:
Using the nice solution of Vukašin Manojlović doesn't work out of the box because LESS executes + or - operations during the LESS compilation.
One solution is to escape LESS so that it doesn't execute the operation.
Disable LESS-CSS Overwriting calc()
#someMarginVariable = 15px;
margin: #someMarginVariable;
width: calc(~"100% - "#someMarginVariable*2);
width: -moz-calc(~"100% - "#someMarginVariable*2);
width: -webkit-calc(~"100% - "#someMarginVariable*2);
width: -o-calc(~"100% - "#someMarginVariable*2);
or can use a mixin like:
.fullWidthMinusMarginPaddingMixin(#marginSize,#paddingSize) {
#minusValue: (#marginSize+#paddingSize)*2;
padding: #paddingSize;
margin: #marginSize;
width: calc(~"100% - "#minusValue);
width: -moz-calc(~"100% - "#minusValue);
width: -webkit-calc(~"100% - "#minusValue);
width: -o-calc(~"100% - "#minusValue);
}
If possible, try to use padding with box-sizing instead, on #page element
#page {
padding: 10px;
box-sizing: border-box;
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 100%;
}
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've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;
I'm having a bit of trouble with a div, my website has one wrapper sized height: 100%; this wrapper contains various divs like a header, slider and a content div. The only problem is the content div gets pushed out of the wrapper div for some mysterious reason.
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
You can see a live demo at http://k2stuc.nl/test/
I don't understand your question 100%. But I saw an issue, the navigation behind the slideshow is because your slides, .wrapper .slider-container #slideshow > div has set to position:absolute.
Try setting .slider-container height to a fixed height. Otherwise slides will be above the content.
you are floating things that should not be floated
i.e .header, .main-content,#slideshow - none of these need floats - body should not have height:100%;
give .slide-container a fixed height in pixels not a percentage.. doing the above will fix your problem
Setting height: 100% on the <body> sets its height to 100% of the viewport.
Now, the viewport is as high as the browser window's inner-height; and that changes when you resize the browser itself.
Any direct child of the <body>, set to height: 100% then inherits the viewport's height.
That's part of how a lot of the 'parallax' websites do their thing.
I think the problem comes from the fact the slider div has height:100%
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.