I have some text in h3 tag, but the text is not visible, I have tried changing the height of the h3 tag as well of the div containing it.
The text I am talking about is visible in screenshot here - http://imagebin.org/226001
& the web page is here at - http://bit.ly/PLDSCJ
It's because the parent elements (.detail , .details and .details_wrapper) all have a fixed height. The H3 will be placed inside those elements, so when it's bigger you'll not see it.
Solution is to change the height of the parent elements.
try to increase the height of
<div class="details_wrapper">
something like this...
.details_wrapper{
height:400px;
}
I think one of the container divs on you page is clipping that part out.
It is most probably the div with .details_wrapper class that has just 200px as height.
Either align those hheights properly or set overflow to visible
Your wrapper is not high enough, specifically
<div class="wrapper clearfix">
<div class="carousel clearfix" style="position:absolute;">
<div class="panel">
<div class="details_wrapper">
This container cuts off your text. When you change to height to something more, say 400px; your text reappears! It is situated in this part of your CSS:
.carousel .panel .details_wrapper {
height: 400px; /* changed this height */
left: 25px;
overflow: hidden;
position: absolute;
top: 20px;
width: 175px;
}
Increase the height in your details_wrapper
Just add:
style="height: 400px"
And the problem is solved.
Use some color other than White.
<h3 class="Lexia-Bold" style="color:black; overflow: auto; width: 100px; height:500px;">
Related
I've a fixed width <div> positionned inside the body element with float:right. When I resize the window and the width of the <div> is below the width of the window no scrollbar appears.
HTML
<body>
<div>Some text content inside.</div>
</body>
CSS
div{
background : blue;
width : 400px;
float : right;
}
It's the same if I change float:right by position:absolute; right:0;.
If I add body{overflow:auto;} it's still the same.
My questions are : Why this behavior? and How can I change it?
http://jsfiddle.net/Sk7Qh/
You can never scroll further to the left than the left edge of the document (or further up then the top edge).
Content, however, can be positioned there.
This is what is happening and you can't change it.
The closest you could come would be to set a minimum width on a containing element so that the content is never positioned off the left or top edges.
e.g.
body {
position: relative;
min-width: 300px;
}
Update after comment from OP:
Then you just use an outside box around your div
<div id="outside">
<div id="inside">
Text
</div>
</div>
And CSS:
#outside {
max-width: 100%;
overflow-x: auto;
float: right;
}
#inside {
background:blue;
width: 300px;
}
See http://jsfiddle.net/Sk7Qh/6/
Better?
Currently, I'm working on a navigation and I've encountered this issue:
The content of the navigation is floated to left. When I try to set the background color for the navigation itself, it does not work. Look at this example:
http://cssdeck.com/labs/qknohqxe
When the float:left is removed, the background color becomes visible, however, the "form" of the navigation is destroyed.
I'm pretty sure I'm missing an important point as I'm trying to reach to this simple point where both form and background color are preserved as I wanted.
My guess is that, there is a relation between the floated content, and the size of the carrier (#nav in my case).
Needing suggestions/workarounds for this issue.
Add this to .group:
overflow:auto;
That's it.
There is also another solution: adding a clear:both; element after all floating divs. But it's a bit more dirty:
<div class="container">
<div class="floating div"></div>
<div class="floating div"></div>
<div class="floating div"></div>
<div style="clear:both;"></div>
</div>
It always happens when you use floating divs. The container doesn't care about floating elements so it is like an empty container unless you use one of the mentioned solutions.
On the parent container (.group in your case), add overflow: auto or set a fixed height.
This happens because floated, as well as absolutely positioned elements are, by default, excluded from the document flow and thus are ignored when positioning the following elements.
Add a height to your .group.
.group{
height: 300px;
background-color: blue;
}
When you float objects it takes it out of the document flow. Meaning the parent object has no relation to the height of the child elements.
By setting a height you're forcing the container to go down.
Alternatively you can add an overflow to the container .group to force it to look for the height.
.group{
overflow: hidden;
background-color: blue;
}
Here's working CSS declaration.
.group{
background-color: blue;
float: left;
width: 200px;
}
You need to understand floating and positioning of nested elements.
Just add a clear both; to an extra element:
<div id="nav">
<div class="group">
<div class="button">Button1</div>
<div class="button">Button2</div>
<div class="button small">Button3</div>
<div class="button small">Button4</div>
<div class="button">Button5</div>
<br class="clear" />
</div>
</div>
#nav{
width: 240px;
}
.button{
float:left;
border-radius: 20px;
width: 200px;
height: 50px;
margin-top: 10px;
background-color: red;
text-align: center;
line-height: 50px;
}
.group{
background-color: blue;
}
.small{
width: 100px;
}
.clear
{
clear: both;
}
I have an element (in my case a HR tag) that needs to be as wide as the browser but which is also wider than it's parent container. However, it still needs to maintain relative positioning so that it scrolls vertically with the page. The problem is that my parent div has to have relative positioning as well (due to other layouts that are working).
The only way I have been able to solve this is to set the width of the HR tag to 3000px with a left position of -1000px. This works, but it adds a horizontal scrollbar to the page (to display the 3000px width). Is there any way to accomplish this cleanly (without the horizontal scroll bar)? You can see my fiddle at http://jsfiddle.net/UGwst/.
Here's the HTML:
<div id="layout-wrapper">
<p>Above Content</p>
<div id="content-wrapper">
<p>Top Content Here</p>
<hr class="rule" />
<p>Bottom Content Here</p>
</div>
</div>
Here's the CSS:
#content-wrapper {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background-color: #ddd;
position: relative;
}
.rule {
background-color: #dbb328;
height: 5px;
position: relative;
left: -1000px;
width: 3000px;
}
I realize that there are a couple of other questions here that are similar, but don't quite seem to fix this issue.
Use position:relative on the parent.
Use position:absolute on the HR, that way the HR is bound to the parent and will scroll with it.
To hide scroll bars use overflow:hidden on your outer wrapper, or BODY.
Try
body {overflow-x: hidden;}
to eliminate the horizontal scrollbar. According to this answer, it even works in IE6 - CSS - Only Horizontal Overflow?
I have the following html code:
<div class="outer ui-draggable" style="position: relative;">
<div class="inner">Foo bar</div>
</div>
With this CSS:
.outer
{
background-color: #F7F085;
margin: 5px;
height: 100px;
width: 150px;
text-align:center;
vertical-align:text-bottom;
}
.outer .inner
{
display:inline;
vertical-align:middle;
height: 100px;
width: 150px;
}
I would like the inner div to fill the outer div completely - the text block should be an entire 100X150 box.
The problem is that this code doesn't produce the desired effect. The outer div is indeed the correct size, but the inner div seems to only fill a small area at the top of the outer div.
I also tried using height:inherit and width:inherit instead of specifying a size.
The problem is with the display:inline style. If you want it to behave like a normal DIV, keep it display:block. If it's display:inline it will only be as tall as the inherited line-height.
Might be because of the vertical-align style property. It is an invalid styling rule. It is only valid for <tr> <td> and <div> with display:table-cell
I'm using the equal heights CSS trick as outlined on this page.
It was all working fine until today when I need to add a dialogue box inside one of the columns, which is absolutely positioned to take it out of the flow. The problem is that since the container has "overflow: hidden" on it, the dialogue is being cut off when it overflows.
Aside from bringing the dialogue outside of the container element, is there any possible way to get it to show via CSS?
Here's a small example demonstrating what I've mentioned.
<style>
.container { overflow: hidden; margin-top: 30px }
.col {
float: left;
padding-bottom: 2000px;
margin-bottom: -2000px;
border-right: 1px solid black;
width: 100px;
background-color: grey;
}
.col.third { border-right: none }
#div-a { position: relative }
#div-b {
position: absolute;
background-color: red;
width: 35px;
height: 350px;
bottom: 0;
right: 0;
margin: 5px;
border: 2px solid black;
}
</style>
<div class="container">
<div class="col first">
<p style="height: 100px">One</p>
</div>
<div class="col second">
<p style="height: 300px">Two</p>
<div id="div-a">
<!-- this gets cut off by the "overflow: hidden" on div.container -->
<div id="div-b">
Foo
</div>
</div>
</div>
<div class="col third">
<p style="height: 200px">Three</p>
</div>
</div>
You see that div#div-b is cut off at the top when it overflows in the div.container element.
Unfortunately what you want to do is impossible without bringing the dialogue outside of the container element.
Your best bet is to make the dialog element a sibling of the container and position it that way.
Unfortunately no... I don't think there's a way to circumvent overflow: hidden with absolute position. You may experiment with position: fixed, but you won't be positioning under quite the same conditions if you use it.
One option would be to place the content of your overflow:hidden container into a sub-container (a child div perhaps). Then, make the sub-container match the dimensions of the container and move the overflow:hidden from the container to the sub-container.
Then, you can make the dialog a child of the container (a sibling of the sub-container), and it will now exist in an element that does NOT have overflow:hidden.
I haven't tested this, and removing the overflow:hidden from the container may break your design. If that is the case, I would suggest doing as others have and moving the dialog box outside of the container entirely. This could even be done via Javascript if you don't have the option of putting the dialog box's code anywhere else. (Javascript could make the dialog box a child of BODY, or some other tag, when you need it displayed)