I have a content div within a main wrapper div. I've set both the margin-right and paddding-right to 0 on the content div, yet chrome still shows it extends to the end of the wrapper div, even passed it a little:
I'm trying to understand why this is. The Css for the outer and inner divs looks like this:
#Inner {
position: relative;
width: 40%;
height: 70%;
top: 3%;
margin-left: 2%;
margin-right: 0;
padding-right: 0;
text-align: center;
}
#outer {
height:80vh;
width:50vw;
position:absolute;
border-radius:5%;
border:3px solid black;
left:50%;
transform:translate(-50%, 0);
top:10%;
background: linear-gradient(to bottom, #304352, #525252);
}
Is this just something to do with chrome or does the inner div really extend so far, even passed the wrapper?
After a bit of research, I've found out that adding the display property of inline-block seemed to take away the right margin. I guess I still have more to understand about the block model.
Related
Here is 8 floating blocks with equal content with some problems:
if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
if I put a cursor on block - it can't be appeared at the top, and do not move othes block
How makes block working well?
HTML:
<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>
CSS:
.sideblock {
width: 220px;
height: 80px;
overflow: hidden;
margin: 10px;
float: left;
}
.sideblock .inner {
background: #ffffff;
padding: 10px;}
.sideblock .style-menu {
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);}
.sideblock:hover {
box-shadow: 0px 0px 5px #000;
overflow: visible;
height: auto;}
Here is my code - http://jsfiddle.net/2HqZV/1/
Thx for support
Well i assume you want the have the same look as when the div is hovered but then smaller? You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.
When you inspect your element you can easially see the heights of your elements.
You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:
.sideblock .style-menu {
height: inherit;
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);
}
Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:
.sideblock .inner {
background: #ffffff;
padding: 10px;
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
jsFiddle
I hope this is what you meant.
btw, i find your way of adding a border very unique ^^
Update
So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM). To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:
.sideblock:hover .style-menu
{
box-shadow: 0px 0px 5px #000;
position: absolute;
}
Because this element goes on top of the other, you want to add the shadow here.
Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:
.sideblock:hover
{
min-height: 80px;
height: auto;
}
jsFiddle
I currently have the following layout for my webpage:
<div class="content-body">
<div class="left-content-bar siteborder"></div>
<div class="inner-content">
... some content
</div>
<div class="right-content-bar siteborder"></div>
</div>
I have made a repeating background-image for left and right content bar. I want the bar to always go from the top of the page to the end of the page. My current problem is, that the bars only take as much space as the inner-content (the bars end at the bottom end of the content)
I found a solution, so that the bars will always go to the bottom, but this includes a min-height which I don't like, because it will have a lot of whitespace with a small screen resolution.
See this css for my current solution (The height will always be minimum 1000px with this, and this shouldn't be):
.content-body{
position:relative;
overflow:hidden;
min-height: 1000px;
height: auto !important;
height: 1000px;
}
.left-content-bar{
float:left;
position:relative;
width: 10px;
background-image: url(/default/images/content-left.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.right-content-bar{
float:left;
position:relative;
width: 14px;
background-image: url(/default/images/content-right.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
.inner-content{
float:left;
width:956px;
position: relative;
height: auto;
min-height: 100% !important;
}
I hope that anyone can give me a better solution than my current
Have you tried to use inline-block instead of float ?
Using float was originally made to display text around a picture, not to display divs the way you like (move away from floats if you can).
Anyway, using display:inline-block; you can put the 3 divs beside each other, and have the left and right column reach the bottom.
.content-body{
height:1000px;
}
.siteborder{
height:100%;
width:100px;
display:inline-block;
vertical-align:top;
}
.inner-content{
width:150px;
display:inline-block;
vertical-align:top;
}
Live example : http://jsfiddle.net/8vQrU/
I would approach this a bit differently. With the same html as your sample, my css would look something like this:
.left-content-bar{
position:fixed;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:url(/default/images/content-left.png) repeat-y;
}
.right-content-bar{
position:fixed;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:url(/default/images/content-right.png) repeat-y;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
I positioned the sidebars fixed. By setting both the bottom and the top property to 0 they stretch up to the height of the viewport. By then adding some padding to the actual content wrapper I make sure the sidebars and the content don't overlap.
I set up a small example to demonstrate: http://jsfiddle.net/4Swvu/1/
Feel free to ask if you want some more explanation.
Edit:
If you want the sidebars on your content, rather then on you viewport, you could slightly adapt the code. The technique also works with position absolute so you could make your css look something like this:
.content-body {
position: relative;
width: 400px;
margin: 0 auto;
}
.left-content-bar{
position:absolute;
width: 10px;
left: 0;
top: 0;
bottom: 0;
background:#cff;
}
.right-content-bar{
position:absolute;
width: 10px;
top: 0;
right: 0;
bottom: 0;
background:#cff;
}
.inner-content{
padding: 0 10px; /* same padding left and right as the width of the sidebars */
}
and the fiddle: http://jsfiddle.net/4Swvu/5/
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
If you view this in Firefox, you'll see that the bottom footer stays right with the window as you resize, move, etc. It also starts right at the bottom without a scrollbar. However, in IE8 I can't get it to sit at the bottom at the beginning OR move with the window, and probably a number of other issues. I got the code from this site, and it says it's IE compatible, so I must be doing something wrong. I had to alter the code a bit to fit my situation, but here's the IE specific css:
* {
margin: 0;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
}
#footer, .push{
height: 30px;
width: 100%;
background: -moz-linear-gradient(top, #565656, #303030);
background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#303030));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#303030');
text-align:center;
font-family: loginfont;
font-size:13px;
color: #fff;
padding-top:5px;
clear: both;
}
Can anyone tell me what's going wrong? I'm absolutely clueless at this point. I hate IE...
I'm not sure, but it can be the padding-top:5px; which is causing the problem. Try changing the margin: 0 auto -30px; to margin: 0 auto -35px; and see if that helps.
In your #container add <div class="push"></div> and add position:relative; to #container as negative margin will not work on static positioned elements.
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.