http://jsfiddle.net/zP49Z/
As you can see, the children [update] are going out of the parent element [feeds]. How can I fix this?
#updates {
background: #B8C1C2;
box-shadow: inset 0 0 5px;
height: 100%;
float: right;
position: fixed;
top: 0;
right: 0;
z-index: 100;
overflow: auto;
}
#feeds {
width: auto;
height: 300px;
}
.update {
border-bottom: 1px solid #929493;
width: auto;
height: auto;
padding-bottom: 20px;
margin-top: 10px;
}
Thanks!
You can use overflow-x: hidden; if you want the feed to be contained and scroll. View here: jsfiddle.net/MathiasaurusRex/zP49Z/2
#feeds {
width: auto;
height: 300px;
overflow-x: hidden;
}
Related
I am facing a typical situation. I am trying to practice dropdown menu in CSS. Here, the child div .dropdown (grey colored) appears whenever the parent div .content-small (green colored) is hovered upon. Please note, that I have used the .max-width property for all div's because I want all the div's to scale down/up whenever the browser window is scaled.
Now, what I want to do is that I want to increase the max-width of the child div dropdown. But whenever I try to enter a value above 50px, nothing happens. The width DOES NOT increases.
I know that this can be resolved by replacing max-width with only width in the .dropdown class. But if I do that, then the child div dropdown will not scale with the browser window. So in any case, I have to use .max-width property for all divs.
I also don't want to use media queries at this stage. In totality, this is what I am looking for:
I want to increase the width of the dropdown child div .dropdown, I also want it to be scaled along with the browser windows like all other div's (max-width)
I don't want to use media queries at this stage, since I am trying to practice with plain CSS
I don't mind if the .dropdown div DOES NOT remain the child of the parent .content-small (if a possible solution needs it that way)
Would appreciate a solution for this.
* {
box-sizing: border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}
.content-small:hover .dropdown{
visibility: visible;
}
.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>
Hopefully this does not interfere with what you are trying to accomplish, but what about restructuring your code a little bit:
HTML
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container" style="height:60px;padding-top:10px;">
<div class="dropdown"></div>
</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}
.dropdown {
background-color: rgba(214,214,214,1);
border: 3px solid rgba(255,0,0,1);
max-width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;
}
And here is:
UPDATED JS FIDDLE
[EDIT]
The + in the css select is saying to look for elements after the first criteria. So, in this case, the css is saying, when you hover over .content-small, it then targets the element AFTER .content-small with .dropdown and applies the css to it. Although it is not the most clear, here is a link of some documentation on css selectors
[SECOND EDIT]
I changed the code above to wrap the dropdown in a container and then set it so on container:hover it alters the visibility of .dropdown the same way, making it persist as visible if you are hovering over either. The reason I had to introduce a container is to give it that spacing between .dropdown and .content-small - which you can see I did with padding-top: and not margin-top: because margin would not have worked with the :hover
when you tell: width:100%; to an absolute child, it takes innerwidth and won't mind the borders,why should it overflow :) ?
You may size it with coordonates like you did for left, use right as well and drop the width:100%;
max-width will still be efficient and you may use margin:auto as well if you wish.
* {
box-sizing: border-box;
}
a {
color: rgba(0, 0, 0, 1);
text-decoration: none;
}
a:hover {
color: rgba(0, 0, 255, 1);
}
html,
body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 1);
padding: 0px;
}
.wrapper {
height: 220px;
/*demo purpose */
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204, 204, 204, 1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0, 255, 204, 1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0, 0, 0, 1);
top: 5px;
}
.content-small:hover .dropdown {
visibility: visible;
}
.dropdown {
box-sizing: border-box;
max-width: 250px;
height: 50px;
background-color: rgba(214, 214, 214, 1);
position: absolute;
border: 3px solid rgba(255, 0, 0, 1);
top: 47px;
left: -3px;
right: -3px;
margin: auto;
visibility: visible;
}
.wrapper + .wrapper .dropdown {
max-width: 50px;
font-size:0.75em;
}
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">100% + border
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">tiny
</div>
</div>
</div>
</div>
just practicing with css dropdown. In the following code, the .container div (blue colored one) contains the child dropdown div .dropdown (green colored one, I have disabled this color to avoid confusion). The container div is perfectly horizontally aligned to its above div .content-small (red colored one). Since I want the position and margins of all the div's to be mantained whenever I scale down the browser window, I used left: 41.66%; in percentage so that the container div should stay aligned to its top red div.
The container div stays aligned, but whenever the window is scaled down to lowest size, the container div shifts slightly to the right. PLEASE see the attached screenshot. Why is that?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
left: 41.66%;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>
That's because you're saying left: 41.66%;, which is not an accurate way to center. Instead, use this:
CSS
.container {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(255,0,0,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top: 10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{
visibility: visible;
height: 100px;
max-width: 100px;
background-color: rgba(204,102,255,1);
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.dropdown {
/* [disabled]background-color: rgba(0,255,0,1); */
/* [disabled]border: 3px solid rgba(255,0,0,1); */
width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 3px;
}
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container">
<div class="dropdown"></div>
</div>
</div>
</div>
JSFiddle
I'm designing an ebay template. However, a problem that I keep running into is that there seems to be a whitespace which I can't get rid of between the mainContainer div and the footer. I have highlighted the two divs with green and red to make the problem clear.
I want to know how I can get rid of the whitespace, and have the two divs underneath each other.
http://jsfiddle.net/4vembvLg/
Help is appreciated.
The whole code is on jsfiddle
* {
margin: 0;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
.footer {
height: 600px;
margin: 0;
padding: 0;
background-color: red;
}
#top-bar {
background: url(http://demo.presthemes.com/centrikids/themes/pt_centrikids/img/bg_topbottom.png) repeat-x;
height: 15px;
}
Remove the top rule in the mainContainer class and pageContainer id
.mainContainer {
background-color: green;
height: 900px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
text-align: left;
/* top: -400px; */
width: 100%;
}
#pageContainer {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
margin: 0 auto;
padding: 0;
position: relative;
/* top: -267px; */
width: 1393px;
}
I believe I found your issue, top: -400px;
.mainContainer {
background-color: green;
height: 900px;
width: 100%;
/* background: #f8f8f8; */
padding: 0;
overflow: hidden;
margin: 0;
text-align: left;
position: relative;
top: -400px; <----------------This Guy here
}
I want to crop images that are too tall. But "overflow: hidden" is not doing anything.
Here is my HTML:
<body id="index_body">
<div id="panel">
<div class="user_container">
<img class="photo_thumbnail" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRRK4PrgJXJ05LYI33B5rqX4xh18UIUQ_kqplT_rXheF5bqPHrE"/>
</div>
. . .
</div>
</body>
Here is my CSS:
#index_body {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
#panel {
display: inline-block;
width: 90%;
margin: auto;
text-align: left;
}
.user_container {
margin: 15px;
border-radius: 5px;
position: relative;
width: 170px;
height: 170px;
z-index: 1;
display: inline-block;
border: 2px dashed blue;
}
.photo_thumbnail {
margin: 0;
z-index: 1;
position: absolute;
border-radius: 5px;
border: 2px gray solid;
width: 170px;
overflow: hidden;
}
See it in action here: http://jsfiddle.net/9oLzynbx/1/.
Others have reported an issue with overflow hidden when the img it's attributed to is not in a parent div with position: relative. See: overflow: hidden not working. But that's not my issue.
Thanks for any help!
You need to put the:
overflow: hidden;
on the container: .user_container
Give overflow: hidden to the .user_container:
.user_container {
margin: 15px;
border-radius: 5px;
position: relative;
width: 170px;
height: 170px;
z-index: 1;
display: inline-block;
border: 2px dashed blue;
overflow: hidden;
}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/9oLzynbx/7/
try this code
.user_container {
margin: 15px;
border-radius: 5px;
position: relative;
width: 170px;
height: 170px;
z-index: 1;
display: inline-block;
border: 2px dashed blue;
overflow: hidden;
}
I am trying to create a header for my website, with a logo contained. I wish for the logo to have a 5 pixel margin from the top of the header div that it is contained inside, however when I add "margin-top: 5px" to the div containing the logo, the header div is push 5 pixels down instead.
<div id="background">
<div id="HeaderGrey">
<div id="HeaderLogo">
<img src="CHBadgeLogo.png" />
</div>
</div>
<div id="HeaderShaderTop"></div>
<div id="HeaderShaderBottom"></div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
#background {
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
}
I'm assuming this would have a pretty easy fix, I'm just new to html/css, sorry.
The positioning works only when you put the parent (containing) element as non-static, like relative. Then you can position the element with relative or absolute (taking it out of the flow).
Like so:
body {
margin: 0;
padding: 0;
position:relative;
}
#background {
left: 0px;
top: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 600px;
overflow: hidden;
z-index:0;
background-color: #303030;
position:relative;
}
#HeaderGrey {
background-color: #676767;
height: 94px;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 0px;
position: relative;
}
#HeaderShaderTop {
background-color: #0e453d;
height: 2px;
width: 100%;
}
#HeaderShaderBottom {
background-color: #009d89;
height: 2px;
width: 100%;
}
#HeaderLogo{
margin-top: 5px;
margin-left: 28px;
height: 85px;
width: 86px;
position: absolute;
}
Very nice Question,
I see that you know how to use padding which is good. If just simply add a padding-top: 5px; to the image div it should just move the image down 5px from the top of the navbar!