I am having a bit of trouble getting my li elements to stay within the parent container. They continue to go off the right side of the page for some reason.
Overflow: Auto seems to fix the problem, but the issue with that is that it cuts off the border and doesn't allow me to scale the li elements properly (I want to have them be about 30% width of the parent container eventually).
Can anyone explain why this is happening or suggest an alternative solution?
Here is my code:
https://repl.it/KZXi/0
https://repl.it/KZXi/2
The problem is the by the default the box-sizing property excludes the padding, that is why your li element contain more than 100% of its parent please read https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
To solve just add..
.answerBox {
border: 2px solid black;
background-color: white;
padding: 40px;
width: 100%;
height: 130px;
box-sizing: border-box;
/*margin-left: 20px;
margin-bottom: 30px;*/
}
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
You can change the box-sizing on your list elements to include padding.
box-sizing:border-box
At the moment your list elements are 100% width + padding-left:40px and padding-right:40px so they overflow the parent container.
Try this CSS to your li:
li.answerBox {
border: 2px solid black;
background-color: white;
padding: 4%; /* <---- */
width: 91%; /* <---- */
height: 70px;
The problem is, when you give padding and border, the content overflows.
Related
I'm trying to use only CSS to adapt a container width to its child element content (the content is dynamic and load from the backend) but then adjusting this width to always a multiple of 8px. Is that possible only using CSS? (No JavaScript)
Thanks!
Edit: I'm trying to use the padding as a way to increase the width of the element and keeping the width:fit-content tag. The thing is, how can I get the current width of the element in CSS to create a formula that increases the padding to a multiple of 8? Can you come up with another solution? Thanks again. Example:
HTML
<div class="banner">This is a banner!</div>
CSS
.banner {
width: fit-content;
padding: calc() /* Not sure what to do here */
border: solid black 1px;
padding: 6px;
text-align: left;
box-sizing: border-box;
}
George if you have a codepen URL to attach it would be really helpful, and a photo of the expected result.
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
this would work with reference to its parent container https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
Use a padding in the green container instead of a margin on the orange element.
Use padding instead of margin:
.body .container {
...
padding-top: 30px;
}
Not sure if this will work in your case, but I just solved this with the following CSS properties
#element {
padding-top: 1px;
margin-top: -1px;
}
#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
You read this document:
Box model - Margin collapsing
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
Not sure how hackish this sounds, but how about adding a transparent border?
I've a problem with some viewport width elements on my website. There are eight divs in a row with a width of 10vw and margin of 2.2222vw. Together the viewport width is about just below 100 (something of 99.9998). The divs are floatet so they should stay in a row.
Everything works just fine but when I'm adding a headline, the elements are breaking. In the fiddle below the divs are breaking without a viewport. Check out my website demo for the "real" issue.
This is my element CSS (SCSS):
door {
width: 10vw;
height: 10vw;
border: solid 3px #000;
float: left;
margin-left: 2.222vw;
position: relative;
margin-bottom: 2.222vw;
a {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
}
.door.last {
margin-right: 2.222vw;
float: right;
}
FIDDLE | WEBSITE DEMO
I think this may be your solution, please try this
http://jsfiddle.net/bqx5u125/
I have added two classes to arrange the divs in horizontal and vertical manner. So this would be the css for those horizontal and veritcal divs.
.arrange-horizontally > *{
display: inline-block;} .arrange-vertically > *{
display: block;}
Also, no need of class 'last', and the float:right is the main thing causing you trouble.
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.