For the purpose of adding a button later, I have placed my images inside of their own individual div. After this, I tried to reapply the border radius that was working previously and it is not applying to the image. However when I use it on an item not in a div it works fine.
.image1 {
padding:0 13px 0 0;
float: left;
width: 220px;
border-radius: 40px;
}
You should add overflow: hidden; container div's css. Because you're applying border-radius on a div. border-radius not for <img> tag according in your code. Also you have padding on container div. So you should be add box-sizing: border-box; to fix it. Read more about box-sizing
FIDDLE HERE
.image1 {
padding:0 13px 0 0;
float: left;
width: 220px;
border-radius: 40px;
overflow:hidden;
box-sizing:border-box;
}
Related
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.
There is an odd problem here that I don't really understand.
I'm trying to just make the middle of the 3 vertical divs have another div inside it which has a black border and 10px of margin on all sides.
However, on the right side there is no visible margin, and on the bottom the div flows right out of the parent div and out of site into the footer.
What am I doing wrong? CSS for the middle div pair...
#mainContent {
height: 100%;
width: 100%;
}
#platter {
border: 1px solid black;
margin: 10px;
height: 100%;
width: 100%;
}
http://jsfiddle.net/Lf7wuty0/1/
Solution: http://jsfiddle.net/efordek0/1/
Borders are applied outside of the element, therefore if your element is width:100%; with a border: 1px solid black;, the border will fall outside of your desired constraint.
Instead of applying a margin to the inner-div #platter, apply a padding to the outer div #mainContent. This way the 100% values will still apply but be subtracted by the 10px padding of the #mainContent and your borders remain inside the desired area.
Here's the correct solution : http://jsfiddle.net/5L4tnwtg/
The changes:
Add:
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
Modify:
#mainContent {
height: 100%;
width:100%;
padding: 10px;
}
#platter {
border: 1px solid black;
height: 100%;
width: 100%;
}
I have a border which I am wrapping around the page using <div>. The parent element is the actual page. I can't seem to figure out why the margin-bottom is not working.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin-top: 24px;
margin-bottom: -24px;
margin-left: 24px;
}
<div class="page_border"></div>
I think the fact you have the bottom margin set to a negative value might be the issue if what you want to do is put a margin between the div and the bottom of the page. If you remove the negative sign that should work. See below.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin: 24px 0 24px 24px;
}
<div class="page_border"></div>
Not sure on what you are asking completly.
Could you not put a height value onto the body tag, and then adjusting the height: value; from div, by doing so though the body will have a fixed height and you may need to set overflow: auto; on the div.
I am new to webdesign, I am using Phonegap (HTML5) I centered my image horizontally this way:
.html
<div id="loginholder" >
<img id="image_person" src="img/icon_login.png" />
...
.css
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
...
#loginholder{
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
}
...
Please why my margin-top is not working?
You need to trigger layout. Add overflow:hidden to #loginholder
I'd add padding-top: 30px; to #loginholder instead and remove the margin-top: 30px; from #image_person:
CSS
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
}
#loginholder {
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
padding-top: 30px;
}
Check out this JSFiddle: http://jsfiddle.net/bazC4/.
Also, if you wanted the #loginholder the same size, just remove 30px from the height so it would be height: 170px;.
The margin might be collapsing with the parent, causing the 30px margin to appear above the loginHolder div (more on margin collapsing). To resolve this, you could do one of the following:
Add a border or padding to loginHolder; this separates the margins so they won't collapse.
Change to using padding-top on the image instead of margin-top.
Try wrapping it in a div:
JSFIDDLE:
http://jsfiddle.net/MBLKs/
CSS:
#loginholder {
width: 300px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#stabilizer {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
Images behave like characters, so entering them doesn't always work. In this case, the position of the wrapping div and the image offset each other, leaving the image in the middle. Now your margin-top and everything else should work.
I have a simple div with width:100%and position:fixed to bottom.
This is my CSS:
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
bottom: 0;
margin:0 5px;
}
When I apply margin left and right using the shorthand property, the footer is being pushed to the right which is very strange.
I created a fiddle for you to play with: Fiddle Demo
You could use calc():
jsFiddle example
#footer {
width: calc(100% - 12px);
border: 1px solid #000000;
position:fixed;
margin:0 5px;
}
body {
margin:0;
padding:0;
}
The 12px in the calc comes from the 5px of each margin, plus the 1px for the left and right border.
Or option #2 (no width or calc() needed). Simply set the left and right to 5px and the footer will stretch the full width, minus those amounts:
#footer {
border: 1px solid #000000;
position:fixed;
left:5px;
right:5px;
}
body {
margin:0;
padding:0;
}
jsFiddle example
I would do two things:
Set box-sizing: border-box. This will ensure paddings dont affect the outer width of your element.
Set margin and padding to 0 for html and body elements as these have applied a margin by default in most browsers.
You can now set the element padding instead of trying a workaround with the margin values.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
padding:0 5px;
}
Can be tested in this JSFiddle
You could use bottom: 0; In my code below I also used padding rather than margin, padding will affect the 'margins' within the div where as margin refers to the outside.
#footer {
width: 100%;
border: 1px solid #000000;
position: fixed;
margin: 0px;
bottom: 0px;
padding: 0px 5px;
}
http://jsfiddle.net/3w6xE/3/
As an alternative to using calc(), (which I think is a good solution, despite the limited browser support), you could wrap the element:
<div class="footer_wrapper">
<div class="footer">test</div>
</div>
The parent, wrapper element is fixed with a width of 100%, and the child .footer element has the margin. As others have mentioned, use box-sizing:border-box in order to include the border in the element's width calculations. Support for box-sizing can be seen here.
Example Here
.footer_wrapper {
width: 100%;
position:fixed;
}
.footer_wrapper > .footer {
border:1px solid #000;
margin:0 5px;
box-sizing:border-box;
}
As an alternative to using a margin, you could also just add left:5px/right:5px.
If you want the reason behind why your example was behaving as it was, it's simply because a fixed element's position is relative to the viewport. The element therefore has a width of 100%, of the window thus explaining why the margin wasn't behaving as expected. Usage of calc() allows you to subtract the margin from the width.