I'm trying to create a mobile version of my site, but any element with width: 100% and padding keeps spilling over my container section. I understand this is because child element is getting wider than the container of a padding value, but how can I keep them full width but with keeping some padding on the left within the child element (so the text doesn't stick to the browser's window)?
Simple code:
section#main {
padding: 100px 0 0 !important;
width: 100%;
}
input, textarea {
width: 100%;
padding-left: 20px;
margin: 0;
}
Results in:
http://tinypic.com/r/2ytxjk9/5
As is you are basically saying, 100% wide but add 100px padding. The easiest fix is to alter the box-sizing: border-box CSS3 Property. This will make it 100% wide including 100px padding.
Related
Currently when I zoom out, all the content goes to the left or right side. But I want to keep the content centered like this page for example. Here is the website which I want to keep the content centered when I zoom out.
Here is the body and wrapper CSS:
body {
background: #0a0a0a none repeat scroll 0 0;
font: 14px/20px "Conv_Gotham-Medium",Arial,Helvetica,sans-serif;
height: 100%;
margin: 0;
min-width: 320px;
overflow-y: scroll;
}
#wrapper{
position: relative;
overflow: hidden;
}
The easiest way to keep something centered is to set margin: 0 auto and a specific width (or a max-width to keep it more dynamic). margin: 0 auto causes the horizontal margin to equally fill the remaining space while the vertical margin stays 0.
e.g. if your window width is 1280px and your #wrapper has a width of 1000px, both margin-left and margin-right will have 140px which leads to a centered wrapper
Live Example: http://codepen.io/anon/pen/QydNYo?editors=110
You seem to use the bootstrap framework.
Did you consider adding an additional class to your col-md-12, most conveniently trough jQuery with css-selectors or just plain CSS?
In your case like:
$(".webdesign-holder .col-md-12").css("max-width", value);
$(".webdesign-holder .col-md-12").css("margin", "0 auto");
OR
.webdesign-holder .col-md-12 {max-width:value;margin:0 auto}
So I have a page with html, header, body, div tags etc. For the CSS, I have:
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 98%;
height: 98%;
padding: 1%;
}
My issue is there's a scrollbar on the right side of the browser. Meaning the height is too high?
The html is set to 100% height and width. The body has a 1% padding which adds 1% top, right, bottom and left, so that's width - 2 = 98 and height - 2 = 98.
So padding 1% height 98%, and width 98%. How am I getting a scrollbar?
It's not working as expected because the percentage-based padding is relative to the width of the element. If you resize the browser so that the height is greater than the width, you will notice that the scrollbar goes away (which is because the padding is relative to the width).
According to the spec:
8 Box model - 8.4 Padding properties:
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
One possible work-around is to use viewport-percentage units such as vw in order to make the percentage relative to the width:
body {
width: 98%;
height: 98%;
padding: 1vh 1vw;
}
You could also add box-sizing: border-box to include the padding in the element's dimensions:
body {
width: 100%;
height: 100%;
padding: 1%;
box-sizing: border-box;
}
In CSS, percentage margin and padding is relative to the width of the container, as Josh Crozier has already explained that in his answer.
I suggest to set the percentage padding on the <html> element, the root of the document, plus box-sizing: border-box; together it gives you the equal space around.
border-box Length and percentages values for width and height (and respective min/max properties) on this element determine the
border box of the element. That is, any padding or border specified on
the element is laid out and drawn inside this specified width and
height. The content width and height are calculated by subtracting the
border and padding widths of the respective sides from the specified
width and height properties. -W3C
html {
background: silver;
box-sizing: border-box;
height: 100%;
padding: 5%;
}
body {
background: pink;
height: 100%;
margin: 0;
}
As you can see on this link ( http://riksblog.com/Marnik/index.html ), for some reason the width of the body and website is as it should, but there's a strange, empty space next to my website which makes it wider than it should.
I'm using bootstrap so I'm not really able to use these tricks like media-queries in css for the desktop version.
your looking for the overflow css property try this:
body {
overflow-x: hidden;
}
to completely remove the problem get rid of the right padding on this class:
section.first .section-content {
padding: 150px 15px //remove left/right padding
}
The problem is this css:
section.first .section-content {
position: relative;
width: 100%;
padding: 150px 15px;
text-align: center;
}
which causes the .section-content div to be as wide as its parent plus 30px.
Possible solutions are to add a box-sizing property to the style
box-sizing: border-box;
or change the width so that it doesn't exceed its parent
width: calc(100% - 30px);
Take this simple example... something I never noticed before now.
HTML:
<body>
<div class="container">
<div class="sidebar">
</div>
</div>
</body>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
border: 1px solid #000;
}
.container {
height: 250px;
}
.sidebar {
width: 20%;
}
setting the height of body to 100% seems to work fine in this fiddle.
however, if you change the size of .container so that it expands beyond the initial window size... you will notice the div breaks out of the body container (it even appears to break out of the html container too)?
Reformatted Question
Is it possible to set height of the body to 100% of browser window initially but also allow the parent containers to expand with its children if it expands beyond the initial window size?
Typically, when you want to have html and body take on the height of the viewport but also allow them to expand with the content, you set height: 100% on html only, and min-height: 100% instead of height on body. Further explanation can be found in my answers to the following questions:
height: 100% or min-height: 100% for html and body elements?
Applying a background to <html> and/or <body>
Unfortunately, because html is the root element, you cannot set min-height on it alone, or everything will fall apart. You need height: 100% because otherwise there is no parent height on which to base body and its contents; the height of html itself is based on the height of the viewport, which as you may have guessed is pre-determined.
This will be problematic if your actual layout has borders on all these elements, so instead I'm going to assume the borders aren't actually needed. You do not need to worry about the background because it will automatically be transferred to the viewport allowing it to cover the entire painting area (details in the second link).
Given your CSS, you can simply set height: auto on body to cancel out the height: 100% in your previous rule, along with min-height: 100%:
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
body {
height: auto;
min-height: 100%;
}
Note that I've also removed the borders, again based on my assumption that they're not needed.
Now we have another problem: once the content grows beyond the browser height, the padding on html disappears, since html doesn't expand along with the other content due to height: 100% (scroll to the bottom to see this).
You can't remove height: 100% since it's required, but you can still change the padding on html to margins around body instead because the margins will continue to take effect even once body overflows html, resulting in the following (again, scroll to the bottom):
html, body, div {
background: rgba(0, 0, 0, .2);
margin: 0;
padding: 20px;
height: 100%;
}
html {
padding: 0;
}
body {
height: auto;
min-height: 100%;
margin: 20px;
}
The default behavior when an element is set to 100% height is to fill its parent entirely, minus the parent's padding value.
Its your padding. I put your code in Dreamweaver and began to check to see why it was doing that. You're right, it works just fine until it smacks out of the viewport by changing the height. I fixed the issue by removing the padding. I suggest reworking how you organized your padding or try using something fill space without using padding. (Such as margin: 5px; for example on the outer layers instead using padding on the inside of the layers. You can even just using a blank fixed height div, afix your inner divs to a percent, and rinse and repeat. Its a dirty method.)
I would like one div in my web page to take up the whole area of the screen - vertically and horizontally.
There will be more divs below it.
I got the horizontal part, but I'm not sure how to do the vertical part.
This website does it to an extent: http://ournameismud.co.uk/#
Try setting the height of the html and body to 100% and then your div to 100% as well.
For Example
html, body {
height: 100%
padding: 0;
margin: 0;
}
#my-div {
width: 100%;
height: 100%;
}
Edit: Forgot to set margin and padding to 0.