I am making div with image and text. User can hover on this div to get dropdown.
I have issue on alignment of dropdown. I need it to be aligned with the right border of hovered div:
This is the code:
<div id="hoverDiv">
<img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
Hover Me!
<div class="showme">
<p>
Hidden Stuff!</p>
</div>
</div>
And CSS
#hoverDiv
{
width: 100px;
height: 40px;
float: right;
margin-right: 5%;
}
#hoverDiv:hover
{
background: #ff0000;
}
#hoverDiv:hover .showme
{
display: inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.showme
{
display: none;
width: 100px;
height: 200px;
background: #0000ff;
margin: 0px auto;
float: left;
left: -999em;
padding: 10px 5px 0px 5px;
border: 1px solid #777777;
border-top: none;
z-index: 10;
position: absolute;
left: auto;
top: auto;
}
In #hoverDiv, add position:relative
In #hoverDiv:hover div.showme:
Remove float:left (redundant)
Remove position:relative (redundant)
Remove margin-left:5px && margin-right:5px unless you prefer them
In div.showme:
Remove float:left (redundant)
Remove left:-999em (redundant)
Replace left:auto with right:0
This jsFiddle has all the work done for you.
Did you mean something like this?
http://jsfiddle.net/nbZmG/9/
Here's another one -
http://jsfiddle.net/nbZmG/10/
Notice that in both cases, the width of the blue box is 120px, and they are aligned according to the left and right side of the red box using margin.
Hope this helped.
You're adding margin-left:5px on hover on your .showme div, remove that and it should align:
#hoverDiv:hover .showme {
display: inline;
float: left;
margin-left: 0; /* here */
margin-right: 5px;
position: relative;
}
In #hoverDiv:hover .showme remove margin-left and margin-right.
In .showme remove margin and modify padding to 10px 0px 0px 0px, and border: 1px to 0px.
Related
I can't seem to make an element move in CSS. It's a form with a background and it's centered. I can't see what I'm doing wrong.
#skyformbox {
width: 50%;
margin: 0 auto;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-
content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
<div align="left">
<div id="skyformbox">
[gravityform id="12" title="false" description="false"]
</div>
</div>
Why are you positioning 2000px left? As far as I know the "left" property will only work if the positioning is set to absolute...
Anyway try this:
#skyformbox {
width: 50%;
margin-left: 0px;
margin-top: 0px;
clear: both;
border: 3px solid #000000;
padding-top: 20px;
background: #ccc url(http://www.ultraframehomeimprovements.co.uk/wp-content/uploads/2018/07/Sky-box.png);
overflow: auto;
padding: 5;
left: 2000px;
}
Setting the margin-left to 0px did the trick for me (assuming that what you're trying to do here is to get the form to align to the left side of the page).
I have two div elements. Second is inside in first element.
In second I display some text. For second div I set height to auto and when I put more text in div height is greater. Also I set height for first div to auto, but first div has always same height.
How I can set height of DIV to be dependable of number of text rows?
<div class="first-div">
<div class="second-div">
</div>
</div>
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: auto;
min-height: 75px;
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Add overflow:hidden to .first-div.
You may want to check out this question: How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?
Demo 1
add overflow: auto to outer div (.first-div)
css
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: 100%;
min-height: 75px;
overflow:auto; /* added */
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Demo 2
or you can add div to the html and set its style as clear: both
css
.clear {
clear: both;
}
html
<div class="first-div">
<div class="second-div"></div>
<div class="clear"></div>
</div>
You can remove the min-height from your .first-div and apply overflow: hidden check out the fiddle, I think this is what you want.
In the .second-div you can change the height with min-height. In the fiddle I have it at 300px.
http://jsfiddle.net/wcnbq9xc/
In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #content.
FIDDLE: http://jsfiddle.net/Zfcba/
HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.
Note: I tried the same without the outer div (http://jsfiddle.net/Zfcba/1). Still the same problem. :(
Add this to your css
#above{position:absolute;}
z-index only works for absolute positioned elements. As the browser ignores the value for z-index, it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav, #content will be displayed over #nav.
I want to float a pair of fluid divs across my page, each taking up half of their container's width, but with a margin of 10px between them. I've done this JSFiddle http://jsfiddle.net/andfinally/sa53B/5/, and here's the HTML:
<div class="clearfix">
<a class="prev" href="#">Previous</a>
<a class="next" href="#">Next</a>
</div>
And CSS:
.prev {
background: black;
color: white;
font-size: 16px;
margin-bottom: 10px;
display: block;
float: left;
box-sizing: border-box;
width: 50%;
margin-right: 5px;
}
.next {
background: black;
color: white;
font-size: 16px;
margin-bottom: 10px;
display: block;
float: right;
box-sizing: border-box;
width: 50%;
margin-left: 5px;
}
The box-sizing rule isn't enough to make this work - the divs are more than 50% wide. In one of the answers to this question somebody suggested using CSS display-table. Can anyone explain how to make that work in this situation?
Thanks!
You can either a) lower 50% to 48% and make the margin 2% or b) use CSS3 calc, which is not supported everywhere, but should be an option in the near future. (Specifically, when IE8 is off the table) (See http://caniuse.com/#feat=calc for compatability)
Example using percentages: http://jsfiddle.net/sa53B/9/
.prev {
background: black;
color: white;
font-size: 16px;
display: block;
float: left;
box-sizing: border-box;
width: 48%;
margin: 0 2% 10px 0
}
.next {
background: black;
color: white;
font-size: 16px;
display: block;
float: right;
box-sizing: border-box;
width: 48%;
margin: 0 0 10px 2%
}
Example using calc: http://jsfiddle.net/sa53B/6/
.prev {
background: black;
color: white;
font-size: 16px;
display: block;
float: left;
box-sizing: border-box;
width: 47%;
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
margin: 0 5px 10px 0;
}
.next {
background: black;
color: white;
font-size: 16px;
display: block;
float: right;
box-sizing: border-box;
width: 47%;
width: -webkit-calc(50% - 5px);
margin: 0 0 10px 5px;
}
Margin will add to your containers width. If you are using a width that is based on a percentage you should set your margin value a percentage as well.
For example, if you want two 50% divs. You need to account for the margin too. In order to do so, you need to subtract the margin from the total width. If you want 1% margin left and right, thats a total of 2% you need to remove from the total width.
div {
float: left;
width: 48%;
margin: 0 1%;
}
your updated fiddle: http://jsfiddle.net/sa53B/8/
Recently in my task i need two float columns with 8px fixed margin between them.
So, i used border and box-sizing properties without any calc magic.
So, the solition is:
.wrapper__col {
width: 50%;
box-sizing: border-box; // used to change box-model
overfow: hidden; // clearfix hack
}
.wrapper__col:nth-child(odd) {
float: left;
border-left: 4px solid transparent;
}
.wrapper__col:nth-child(even) {
float: right;
border-right: 4px solid transparent;
}
<div class="wrapper">
<div class="wrapper__col">1</div>
<div class="wrapper__col">2</div>
</div>
So, that's all ;)
It's late but someone might be interested in this way to fix :
Wrap the elements you wish to display in columns with divs :
<div class="left"><a ....></a></div>
<div class="right"><a ....></a></div>
And just set those styles :
.left {
float:left;
width:50%;
}
.right {
float:right;
width:50%;
}
Whatever the margin of divs contents it won't affect the 50% width.
I used to proceed this way before hearing of usefull css calc.
See JSFiddle
What you are trying to do does not work with fixed margins. You need to calculate using percentage margins.
Box sizing only affects padding and border space, not margin space. So 50% + 50% =100% +5px+5px > 100%.
Use % margins and your problem is solved.
Here's how I do it, but it uses variable gap between:
css:
.left {
float:left;
width:59%;
margin-right: 1%;
background-color:red;
}
.right {
float:left;
width:39%;
margin-left: 1%;
background-color:blue;
}
html:
<div>
<div class="left">left</div>
<div class="right">right</div>
</div>
jsfiddle:
http://jsfiddle.net/gkmjLfgx/
Sometimes you want the same 10px spacing horizontally and vertically and still have equally sized columns.
You can do this by adding a "border-left: 10px solid white" to an extra DIV inside each column and add a "margin-left: -10px" to the columns container to eat up the border of the left column.
fiddle 128psahu
Here in the image Title "Accounts and Holding Disclosure in crossing the white line while DRF is way above the white line...
How can i put the text just above the line using css.
Html code is
<div class="tabs">
<img src="images/disclosure.png" />
Accounts and Holdings Disclosure</div>
<div class="tabs">
<img src="images/drf.png" />
DRF</div>
Css is
.tabs
{
height: 85px;
border-bottom: 1px solid #fff;
text-align: center;
color: #fff;
padding-bottom:7px;
}
.tabs img
{
display: block;
margin-left: auto;
margin-right: auto;
height: 70px;
margin-top: 5px;
}
you should write:
.tabs {
height: auto;
}
There is simply not enough splace in the first block to apply the padding. The .tabs is 85px height, the image is 70px height with a margin of 5px top. So the remaining vertical space for your text is 10px only, and you add 7px of padding.
You need to reduce the size of the image in my opinion.
should be :
.tabs {
height: 90px;
}