I have two elements on my page placed together in columns like articles on a newspaper page. One element is an <aside> tag, with the main content inside of a <section> tag.
The container has a 15px margin to its left that causes it to spill over the right side of the viewport when its width is set to 100%. How can I prevent it from doing just that.
You can see the example from this fiddle: http://jsfiddle.net/spryno724/BHr5F/2/
Note: I know I can use the calc() function to accomplish this task, but given its current browser support, and my audience, I'm not ready to rely on this function.
Easiest Solution is to use padding-left on the .row container instead of margin-left on the content as can be seen in my updated jsfiddle:
div.row {
background-color: rgba(51, 51, 51, 0.9);
display: table-row;
padding-left: 15px;
}
http://jsfiddle.net/BHr5F/4/
Here there are a lot of good answers.
My favorite is:
.container {
width:90%;
margin: auto;
}
Add padding-left: 15px to body element and remove the margin from section.container:
body {
margin: 0;
padding-left: 15px;
}
section.container {
border: 1px solid black;
display: table;
max-width: 100%;
overflow: hidden;
table-layout: auto;
width: 100%;
}
JSFiddle Demo #1
You can also use box-sizing: border-box; to calculate width properties include the padding and border. and remove the horizontal scrollbar:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
JSFiddle Demo #2
Related
I have a section set to a fixed width and a 100% width div inside of it with a 5 pixel border.
Looks fine but you can tell the containing div is a bit off center and it wouldn't be without the border, which I need to match the client comp.
The code is rather straightforward:
#info {
max-width: 980px;
margin: 0 auto;
}
.info-box {
border: 5px solid #0033A0;
display: inline-block;
text-align: center;
padding: 48px 0;
width: 100%;
}
<section id="info">
<div class="info-box">SOME CONTENT</div>
</section>
The only thing I can think of is to make the width of the .info-box to be 98% or something like that, but that's still not going to truly work. So will anything?
BTW, I already tried adding relative positioning, set display to inline instead of inline-block....none of which worked.
Add box-sizing: border-box; to your info-box class
.info-box {
background: rgba(248, 243, 232, 0.5) none repeat scroll 0 0;
border: 5px solid #0033a0;
box-sizing: border-box;
display: inline-block;
padding: 48px 0;
text-align: center;
width: 100%;
}
box-sizing is better explained here https://css-tricks.com/box-sizing/
I have styled some links to look like buttons. These 'buttons' include icons which are added with an icon font using the :after element.
As its a responsive layout, the buttons need to work on multiple screen sizes. When placed inside a flexible container, the:after element overflows it's parent.
Example:
The HTML basically looks something like this:
<div class="wrap">
Test
</div>
with the following CSS code:
.wrap {
background: grey;
width: 20%;
padding: 20px;
}
.btn {
display: inline-block;
padding: 15px;
background: linear-gradient(to top, #ccc, #fafafa);
border: 1px solid #999;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,.55);
max-width: 100%;
}
.icon {
font-family: FontAwesome;
}
.icon:after {
content: "\f04e";
margin-left: 8px;
}
and see this Fiddle: http://jsfiddle.net/r6uLJ/
When you narrow the window size, you will see the two triangles (blue) overflow the button (with grey-white gradient). Is there anything I can do to avoid that but still use pseudo-elements for this?
If you remove the max-width: 100% rule from the .btn rule set, then the problem does not occur.
See: http://jsfiddle.net/audetwebdesign/r6uLJ/3/
.btn {
overflow: hidden;
}
Should do the trick.
try this:
* {
box-sizing: border-box;
}
your thing overflows because of the box model which (the default one) adds the padding on top of the width. so having 100% width is 100% of parent and if you add 15px padding it will overflow 30px when the content wraps on 2 lines...
you might need to prefix it depending on browser, e.g:
-box-sizing: border-box
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
I have the following CSS:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
I have four instances of .divSelectImage which is why the width is 25%. I expect to see all four images side by side inside #imageContainer. So essentially, the four images should take up 100% of the #imageContainer which in turn takes up 100% of the screen.
But I don't. Despite checking firebug, at 25% each, the last image goes to the next line. I have to make them to about 24.5% for them to fit, but I don't want the white space at the end.
This occurs in both Firefox and Google Chrome.
Is there some kind of CSS wizardry that I am missing? How can I accomplish this?
I have set up the scenario on JSFiddle: http://jsfiddle.net/J3KXE/
Its because you haven't accounted for the 2px of border on each image, adding 12px in addition to the 100% width of its containing block. You can use the box-sizing property thats new to CSS to constrain the border and padding areas to the elements' content width:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
http://jsfiddle.net/J3KXE/1/
2 solutions :
box-sizing: border-box;
or
flexbox and all this shit (see http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/)
You have a border of 2px which increases the size of the boxes to 25% plus these 2px on each side. If you don't have to support IE7- you can simply use box-sizing: border-box. If you have to take older browser into account you'd have to declare a wrapper div width 25% without any border/margin/padding and add those styles to the child element.
I want to make three columns in HTML+CSS, first 15%, second 70% and third 15%. The problem is that with my code, third column is wrapping down when i resize window. I've written such CSS for my website:
.maincont {
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
.lcol,
.rcol,
.content {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.lcol {
width: 15%;
background-color: red;
}
.rcol {
width: 15%;
background-color: green;
}
.content {
width: 70%;
background-color: blue;
}
HTML code:
<body>
<div class="maincont">
<div class="lcol">
</div>
<div class="content">
</div>
<div class="rcol">
</div>
</div>
</body>
What am i doing wrong? Thanks in advance.
#Maccath is absolutely correct. Instead of changing any of your numbers however, might I suggest adding this to the top of your CSS file:
* {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Support for everything newer than IE8 - your widths and heights will incorporate paddings.
Also, change your margin numbers in your CSS to padding instead and you'll get your desired result.
The margins on .content are your problem. Margins are adding to the width of your overall content, so it's 20px over 100% width in total, which is why it's forcing the columns to wrap.
I would advise to use a percentage margin on .content instead. Reduce .content's width to, say, 66% and then set the margin to ... 0.66% (weird maths since it's relative). This however does have the disadvantage that the gaps between your columns aren't going to be consistent based on the width of the browser window.
remove
margin-left: 10px;
margin-right: 10px;
it resizes div size and summary it is more than 100%
http://designobvio.us/vodka/ Live demo
I've set my html, container, main and 100% but nomatter what I do I cannot get the border to be 100% height without scroll bars?
How can I achieve an effect?
HTML
<div id="main">
</div>
CSS (not currently the live code but this is what i've tried )
html, body{height:100%; width:100%;}
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;}
By default the borders, margin and padding are not part of width/height and are added on top. That's why you get scrollbars as the full dimensions of the box are 100% in height and width plus the border-width.
You can set the box-sizing property to border-box, which tells the browser to include the calculation for borders and padding in the width/height properties (in opposite to content-box, which is the default value):
#main {
box-sizing: border-box;
[...]
}
As especially IE8 and the earlier version of the other browser families don't support this css-property, it's a good idea to add some browser-specific definitions, too:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Take a look at the mozilla doku for detailed information on box-sizing.
I know this is an old post, but as it pops up on Google first page... Here is my solution that seems to work fine cross browsers:
height: 0:
border-style: solid;
border-width: 8vw 0 0 100vw;
border-color: transparent transparent transparent red;
Just used it for an :after pseudo-element in order to turn it in a triangle shape and it works just fine (test down to ie10).
Simply use 100vw instead of 100% and it should do the trick.
Are you looking for a fixed border or dynamic border? The problem with your code is the W3C box-model. In the default model, padding, margin and border are added to the size of your element. So in your code what you're really telling it is "make the box 100% and then add 10px worth of border".
Normally an easy change would be to manually switch the box model, but unfortunately that property does not play nice with height: 100%. So you have a few options:
1) If you are looking for a fixed border, this is a good trick: http://css-tricks.com/body-border/
2) If you need a dynamic border, you need to somehow get around the additional height the border adds. Here is one way:
html,body { height:100%; padding: 0; margin: 0; }
#container {
min-height:100%;
border-right: 5px solid #000;
border-left: 5px solid #000;
position: relative; /* relative postion so we can absolutely position footer within it */
}
#header {
height: 100px;
border-top: 5px solid #000;
background-color: red;
}
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/
#footer {
height: 100px;
border-bottom: 5px solid #000;
background-color: blue;
position: absolute;
bottom: 0;
width: 100%; /* with absolute position, a width must be declared */
}
HTML
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
jsfiddle here: http://jsfiddle.net/Qw2cb/
You can give box-size:border-box; to 'main', like
#main{
box-size:border-box;
}
Doing so the border will be added to 100% height of main. Learn more about box sizing here
So, you are saying that you do not want to display scrollbars?
CSS:
#main
{
overflow: hidden;
height: 100%;
position: absolute;
margin: 0px;
}