I want a div to go across the page width no matter the size of one's screen. The problem I'm having is that although the width is 100%, when I view the page it requires scrolling horizontally. I've looked up solutions and tried the suggestions regarding the body element, but I still have this issue. Here are my body and div elements:
body{
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
}
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
To be clear this is not homework, I'm doing this for a personal project.
Yes, it is 100% width, but the browser also adds 1em of padding to it, so it's now 100% + 1em. You didn't set the box-sizing property and it's content-box by default.
If you want your layout to behave more naturally, add this to your code:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Check it here: https://jsfiddle.net/avyxhfcp/
BTW: there is no "float: center;"
You can hide the horizontal overflow using overflow-x. You could also use overflow:hidden, but the code below specifically targets horizontal scroll bar.
body {
background-color: #9F6164;
margin:0px;
margin-top: .6em;
width: 100%;
height: 100%;
padding:0px;
overflow-x:hidden; /* hide the horizontal overflow */
}
The solution cosmonot provided is incorrect and will only cause you problems when your div's content stretches off-screen and you can no longer troubleshoot when there are overflow problems because you won't be able to see a scrollbar horizontally.
The real problem is that your div is using width: 100% to occupy the entire horizontal space available, it is then adding on the padding you specified as extra, this results in the overall width being over 100% which breaks out the body element giving overflow and thus making it horizontally scroll able.
The solution is not to alter your body's overflow property, the solution is to apply box-sizing: border-box; to your control panel div. This will make the width you specify include the padding and margin's you specify.
Example
#controlpanel {
height:8em;
width:100%;
background-color:#F8DEBD;
padding: 1em;
margin-right: 1em;
border-bottom: 3px groove black;
float:center;
margin: 0 auto;
}
In future try not to play around with the body, it's usually what you put into it that needs to be troubleshooted.
Related
I have the following block of code for the styling on a div supposed to be a box:
.newsBox{
width: 100%;
text-align: center;
border-style: solid;
border-width: medium;
padding-left: 10px;
padding-right: 10px;
border-radius: 25px;
}
I am using this code in a PWA, and so it is going to be used on a mobile screen.
Instead of my div just spanning the entire screen of my phone, it spans off the screen as well (and so I have to move the screen left and right to view the whole box), but I can't understand why when my width is set to 100%. I have tried everything I could find on stack overflow and other websites; I think it may just be my code that's wrong.
Any help is appreciated. Thanks
After setting the the width to 100% and adding extra padding, it will show annoying scrollbars. Try to add the box-sizing: border-box; property to your div and it will be fixed.
Without the box-sizing property, an element with padding will actually be bigger than its width and height. You should try the following:
.newsBox{
width: 100%;
text-align: center;
border-style: solid;
border-width: medium;
padding-left: 10px;
padding-right: 10px;
border-radius: 25px;
box-sizing: border-box;
}
You can read more about box sizing here.
Aditionally you must take into account the width of your newsBox's parent container. Setting newsBox's width to 100% means it will be full width within its parent.
The scroll probably appear because there is margin or padding property set up somewhere (browsers add them to html and body by default). You can turn it off with:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
box-sizing changes the way browser calculate the width of the element ( 100% - padding of the parent is used instead of 100%).
But it is hard to guess without an actual code.
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);
I'm trying to build a 'table' with CSS but I'm having trouble getting some of the <DIV>s to fill the width of the layout if the content is too short.
It's difficult to explain in words so here's a fiddle:
https://jsfiddle.net/fatmonk/r2sodp7p/
Basically I don't want to see the pink bit in the example - I want the light blue box to expand to fill the width regardless of how much or how little content is in it.
Using display: table-row does the right thing with regards filling the line, but doesn't allow a border to be set.
(The fiddle isn't the whole page - there are more 'rows' to add and the whole 'table' will be repeated with link sand link code and other bits and pieces.)
It's quote possible that in the process of trying to get this working I've over-complicated the HTML as well - I've ended up adding container <DIV>s to try to force the width, so it may be that the HTML needs trimming down as well, but I've run out of ideas.
Remove width:auto from the inline style tag of all .menuContentInPopup and add width: 100% to it in your css, so
<div id="poster2" class="menuContentInPopup" style="width: auto;">
would become
<div id="poster2" class="menuContentInPopup">
And the css:
.menuContentInPopup{
display: table;
height:auto;
border: 1px solid rgba(99,99,99,.75);
border-top: none;
background-color:rgba(235,245,255,1);
padding:5px;
font-size: 10pt;
text-align: justify;
left: 0px;
right: 0px;
float: none;
width: 100%;
}
Here a fiddle showing the result: Fiddle.
I have also adjusted the box-sizing of all elements so that adding padding to the elements does not make it overflow its parent when width is 100%, this is achieved by
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
}
i might understood it wrong but here is how i would fix it.
[Fiddle][1]
I changed the width to 100% so it will fill your full div. Also removed the width: auto in the HTML.
[1]: https://jsfiddle.net/r2sodp7p/10/
FYI, another clean solution for your case here:
[http://jsfiddle.net/giaumn/f99ub6ro/]
You just need to care about 2 properties:
overflow: auto;
on .menu-content and
float: left;
on .poster-thumb
set your width:auto; to width:100%; and add width:100%; to menuContentInPopup class. remove width:auto from html inline styles.
fiddle
This is the css of my div. İ expect the background to fill the whole screen but it is bigger than my screen resolution, so a bottom scroll bar appears
.hero-unit {
padding:60px;
margin-top: 60px;
background: url("../img/bar2.jpg") no-repeat scroll 0;
height:233px;
width:100%;
left:0px;
background-size: cover;
position:absolute;
background-color:#eeeeee;
}
You can use box-sizing
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
This makes it so when you add padding, margin, or borders it will not effect the width. (this will not work IE7 and below)
You are adding padding to the already 100% width.
What you need to do (if you are using percentages) is change your padding to be a percentage and make it add up to 100 percent.
For example:
padding:5%;
width:90%;
I also found an alternative using overflow:hidden to remove the scroll bar. This will not remove your issue though as the padding will still overflow the window, just not visibly.
html, body
{
width:100%;
}
body
{
overflow:hidden;
}
See the jsfiddle here.
remove padding if it is necessary then decrease width.
Try to keep them in percentages like
padding:5%; /*desired value*/
width:80%; /*desired value*/
when they will be added, it should be less than or equal to 100%.
If you have margin then consider it also. (assume margin:5%;)
For Example:
<----------------100%---------------->
margin | padding| div |padding | margin
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->|
This is same for Horizontal (width) or Vertical (Height) adjustments.
Often horizontal overflow happens due to an element whose opacity is 0. You can't also see the element but it leads to horizontal overflow. Add the following code to css.
body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}
This might be due to the margins and the padding of the body.
Add this block to your body to see if it helps:
body {
margin: 0;
padding: 0;
}
Additionally, you're defining padding to an already 100% element, making it larger than the body.
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
Example
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
This is why we have box-sizing in CSS.
I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/
All I added was this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.
Use padding in percentages too and remove from the width:
padding: 5%;
width: 90%;
You can do it without using box-sizing and not clear solutions like width~=99%.
Demo on jsFiddle:
Keep input's padding and border
Add to input negative horizontal margin = border-width + horizontal padding
Add to input's wrapper horizontal padding equal to margin from previous step
HTML markup:
<div class="input_wrap">
<input type="text" />
</div>
CSS:
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Use css calc()
Super simple and awesome.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
Just copied this over here, because I almost missed it in the other thread.
Assuming i'm in a container with 15px padding, this is what i always use for the inner part:
width:auto;
right:15px;
left:15px;
That will stretch the inner part to whatever width it should be less the 15px either side.
Here is the recommendation from codeontrack.com, which has good solution examples:
Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div> is set to display: block (default for <div>).
You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.
Live example
Move the input box' padding to a wrapper element.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
See example here: http://jsfiddle.net/L7wYD/1/
Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
width: auto;
left: 0;
right: 0;
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to #andology's answer from way back but if you make left/right both 0 then you can make margin and/or padding whatever you want. So this is always my default div.
Just understand the difference between width:auto; and width:100%;
Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding.
Width 100% expands the width and adds the padding.
What about wrapping it in a container. Container shoud have style like:
{
width:100%;
border: 10px solid transparent;
}
Try this:
width: 100%;
box-sizing: border-box;
For me, using margin:15px;padding:10px 0 15px 23px;width:100%, the result was this:
The solution for me was to use width:auto instead of width:100%. My new code was:
margin:15px;padding:10px 0 15px 23px;width:auto. Then the element aligned properly:
You can do this:
width: auto;
padding: 20px;