I cannot push the side div and container div in my html code to the background or atleast inline with the other divs. As I have set a border on the divs in my css, it causes <div id="side"> to show above every other div, the same is also happening to <div id="container"? This causes these divs to float over the rest of the divs:
You can see the issue here:
body {
min-height:100%;
}
div {
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: #F6F4F4;
box-sizing: border-box;
box-shadow: 0 -1px 2px rgba(0,0,0, .7);
transform-style: inherit;
}
Put z-index:-1 in #side and #container . For example http://jsfiddle.net/d3u1fqfa/3/
try adding a z-index option to the container in css.
the z-index defines when two or more tags overlap which one of them should be on top the default is z-index:0; so if you try z:-index:-1; it might solve the problem you are having
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.
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;
}
This question already has answers here:
Impact of border property on top margin
(3 answers)
Closed 7 years ago.
EDIT: found a very good link explaining all about border collapse:
border collapse explained with examples
End of edit. Enjoy :)
I am failing to understand this...
Why applying a 1px solid black border to my div changes the div's size by a lot?
(without the border I can see a relatively thin line as my back ground color, with the border the רectangle of the background color is much wider, see the pictures)
this pic is without applying the border:
and now look at this photo (the only difference is the border...)
can someone explain how the border influences so much on the div size / what is really happening here?!
style:
#header {
background-color: yellow;
color: white;
text-align: center;
border: 1px solid black;
}
here is a fiddle so you can play around:
my fiddle
Thanks a lot,
Jimmy.
That's because of margin collapsing.
The margin is not part of the element iself, it's the distance between the element and surrounding elements, or between the element and containing borders or paddings.
In the first image the margins of your header element (a h1 perhaps?) is collapsing outside the div. The margins doesn't affect the size of the div, instead it pushes the surrounding elements away.
When you add a border to the div, then the margins of the header element will push the border away from the header element instead of pushing surrounding elements away. The margins of the header element determine the size of the div.
The Header size is same, just the background will not fill the area specified as element margin. Your h1 has default margin at top and bottom which is not calculated by browser to be filled. In order to force it you can use overflow: hidden; on Header, an old trick that covers 99% of famous clearfix class (for float fix):
#header {
background: yellow;
overflow: hidden;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
The other way would be to avoid h1 margin and use padding instead, or fixed height:
#header {
background: yellow;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
h1 {
margin: 0;
padding: .8em 0;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
You can add box-sizing to prevent this from happening. Not every browser supports it though.
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
The total size of an element is going to be defined by:
Margin>Border>Padding>Actual element size
Your browser's developer console should allow you to see the value of all of these so try and see which one is changing between those two instances. From the pictures provided it looks like the padding may be changing as you manually adjust the border.
Try manual setting these values:
#header{
border: 1px;
border-color: black;
margin: 0;
padding: 0;
}
Set margin on the h1 tag to 0:
h1 {
margin:0;
}
I updated your fiddle here
Perfect example why sometimes using outline instead of border can solve a lot of headache.
Outlines differ from borders in the following ways:
Outlines do not take up space, they are drawn above the content.
With much respect to all other solutions (which are important to understand), try using the following as an easy fix:
outline: 1px solid black;
instead of
border: 1px solid black;
JSFiddle
Cheers!
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid yellow;
}
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;
How to center several boxes in CSS? Suppose I have a div "navigation". Now, the navigation margin is auto, that is, it is in the center, how would I add lists(display:inline) inside navigation that will expand navigation on both sides. I haven't set the width property so the width will be dynamically expanding. Its like float :center.
Set margin:auto and width:940px and you are done. You can change width as per your need. But giving some width is compulsory.
Check this fiddle and tell me if it helped you.
http://jsfiddle.net/JNMZ3/4/
You can change padding of the li elements for more space. And then adjust width of the navigation div to keep it in center.
try this
your css replace with
http://jsfiddle.net/JNMZ3/3/
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 100px;
background:red;
float:left;
}
.rightsidebar {
background:blue;
height: 608px;
width: 100px;
float:right;
}
.content {
width: auto;
margin:0 auto;
background:yellow;
height:608px;
}