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>
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
I tried to create a page footer for each page. The objectif is to center the footer and to place it at the bottom of the page. You can check my JSFiddle, or see the code directly as following.
HTML
<div id="page1" class="page">
<div class="footer">
<p>1</p>
</div>
</div>
CSS
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
}
div.footer {
background-color: #DDD;
width: 100%;
bottom: 0; /* doesn't work */
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
I saw to similar question about How to position div at the bottom of a page ?. However, when i applied its proposition, bottom + position setting, footers in each page are all merged together, placed at the bottom of the navigator's windows. Here's the related JSFiddle
Can somebody help ? Thanks a lot.
You are missing position: relative; applied to the class="page".
This way the element which has absolute position applied knows that needs to be bottom:0 relative to the parent element .page.
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
position:relative;
}
div.footer {
background-color: #DDD;
width: 100%;
bottom: 0; /* it works now */
position: absolute;
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
DEMO http://jsfiddle.net/9xzb9m48/3/
Try this:
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
position: relative;
}
div.footer {
background-color: #DDD;
width: 100%;
position: absolute;
bottom: 0;
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
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;
}
How could I center the blue box inside the red one ?
I see that the left side of the blue box is exactly in the middle of the red box, but I would like to center the whole blue box, not its left side. The dimensions of the boxes are not constant. I want to align regardless of boxes dimensions. Example to play with here. Thanks !
HTML:
<div id="rel">
<span id="abs">Why I'm not centered ?</span>
</div>
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
If you're able to change the <span> tag to a <div>
<div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
Then this piece of CSS should work.
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
I think it's better to use more automation for the enclosed box as less changes would be needed should you change the size of the container box.
You could add left:50px to #abs if that's all you want...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
If you are going to define dimensions like that (200px x 300px and 300px x 400px), here's how it can be centered:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
You can check at my solution here at http://jsfiddle.net/NN68Z/96/
I did the following to the css
#rel {
position: relative;
top: 10px;
left: 20px;
right: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#abs {
display: block;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}
This should work
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}