I am using a table to display some data and for one row, I am displaying a 35-character preview of a (possibly) longer string. When the user does a mouse-over on one of the previews, it displays the full text next to it.
The problem is when the full text is displayed, the tr height is changed to fit the full text, but I want it to stay the same size.
<td><%=shortPreview%>
<br/><div class="details" style="display:none;" id="<%=ID%>"><%=rsTickets("details")%></div></td>
CSS
.details {
position:relative;
top:-15px;
left:260px;
background-color:#FFFFAA;
z-index:1;
padding-top:5px;
padding-bottom:5px;
padding-right:15px;
padding-left:5px;
border:1px;
border-style:solid;
border-color:#CCCC99;
-moz-border-radius: 1em 2em 2em 1em;
border-radius: 1em 2em 2em 1em;
}
Put a fixed size div inside your cell and set it to position: relative. Inside that div put your details one and set it to position: absolute;. This should work for 99%.
Thing is that when you set an object to be relative, then it is relative to the objects around it. This means that if you change the height of the div (or in this case, shows it), the surrounding objects will adapt to this change. So when you set the div to be visible the td, which encapsulates it, will change it's height as well.
Setting the div to an absolute position solves the problem, but then it might get difficult to position it right. Unless you put it in another div. If you put an absolute div within a relative div, then the absolute div will be absolute to the relavite div, thus solving the problem. Here's an example:
<table>
<tr><td><div style=position:relative>
This div will not affect the td more than will this text.
<div style=position:absolute;top10px;>
This div will not affect the td, since it's absolute, and will be
10px from the top of the outer div
</div>
</div></td></tr>
</table>
This should do the trick. Works for me at least.
Related
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I have a div inside a div. The outer div's job is to position the box, while the inner div's job is to position the text. These divs are within a larger div, but I don't think that's the problem. When I try to put padding on the outer div, or in other words move the box, the padding is applied to the inner div and the box is thus getting bigger in that direction. The top-left hand corner is always stuck to the other div it is inside. How do I make it so that the padding is applied to the outside of the box instead of the inside?
Here is the formatting:
<div style="width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;">
<div style="font-size:x-large;
padding-left:40px;
padding-top:0px;
font-family:'Arial';
color:black;">
Profile
</div>
</div>
Not too sure, but by moving the outer box are you sure you haven't mistaken padding with margin? Padding is applied to the inside of the div.
I just changed
padding-left:10px;
padding-top:10px;
to
margin-left:10px;
margin-top:10px;
and increased it to make it more obvious. Also moved the inline css to make it clearer.
http://jsfiddle.net/H334r/3/
1 - For readability, it's generally good practice to not mash a bunch of languages together, even though web dev requires it every now and then.
So separate the css into and throw it in the or use a css stylesheet.
2 - You'll want to have the outer div relative to the page. So in css, position: relative. And the inner div, you want to use an absolute position. So position: absolute.
I took the liberty to clean up code and threw it here in jsFiddle. http://jsfiddle.net/w7Ltp/1/
But if you want the throw it into a html page.
<style>
#outerbox{
width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;
position: relative;
}
#innertext{
position: absolute;
font-size:x-large;
padding-left:10px;
padding-top:0px;
font-family:'Arial';
color:black;
}
</style>
<div id="outerbox">
<div id="innertext">
Profile
</div>
</div>
Padding is applied inside an element.
from W3Schools, The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
So if you are applying the padding to your outside div (div with 100px width), the elements inside it are the ones that get affected.
You might want to look at using margin instead. Or it would be better if you set the padding to the parent of the outer div; With that, all elements inside the parent of the outer div will be uniformly spaced.
I see that you have "align: center" for your outer div. Try using "margin: auto".
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
I have a gridview that has some 20 columns and 1000 rows. The grid is placed under <div> tag. Due to such large figures, the div shows the vertical scrollbars, which is fine but it doesn't show the horizontal scrollbar.
The css written for div is as;
.divCSS{
display:block;
position:relative;
width: auto;
height: 5em;
margin:0;
padding:5px;
background:inherit;
color:inherit;
overflow:auto;
}
The entire <div> code is as below;
<div id="divGrid" align="left" style="border: solid 1px gray; width: 790px; height: 420px;" class="divCSS">
Despite giving overflow:auto, why i don't see a horizontal scrollbar?
If you have a fixed with and have set your overflow to auto then, to quote the W3C:
The behavior of the 'auto' value is user agent-dependent, but should
cause a scrolling mechanism to be provided for overflowing boxes.
In other words, your scroll behaviour may vary depending on the browser. Given you've defined both a fixed height and width, your browser will wrap your text so that it doesn't impact adjacent elements and does the minimum to ensure it merely supports a visible scrolling mechanism to display such that users could access the clipped content.
If you want to see the horizontal scroll bars, you need to include content length that cannot wrap and exceeds your specified element width, such as an image or by specifying white-space: nowrap on one of your contained elements (e.g. a paragraph).
Have a look at this example for an illustration of how it works.
Give the width of the div specific and set overflow-x:visible;
REmove
width: auto;
height: 5em;
from your divCSS class
and for scroll to apper you need content width more than 790px and hight more than 420px.
try
{
overflow-x:scroll;
overflow-y:scroll;
}