Orginal CSS Code
http://www.faressoft.org/BlueCristalTheme/postView.php
Result should be
few things going on here:
your comment box div has a fixed height of 100px
all the elements inside this div are absolutely positioned, which takes them out of the normal flow of the document, which results in the containing comment box div not able to wrap / stretch to fit around the children
use floats or just remove the positioning for the larger content which looks like the second <p>. use margins to position this <p>, see below
I was able to fix the problem by changing your CSS as follows:
#comments .commentBox { /* style.css line 483 */
background-color:#DCDCDC;
/*height:100px; --removed this */
min-height:100px;
position:relative;
}
#comments .commentBox .comment-content { /* style.css line 523 */
color:#676767;
font-size:0.91em;
font-weight:bold;
line-height:24px;
margin:52px 92px 0 0; /* -- added this */
/* -- removed these
position:absolute;
right:95px;
top:52px;
width:570px;
*/
}
You want the clearfix hack.
Add this to your stylesheet:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Then, add class="clearfix" to your div (or clearfix to your existing div class), and it should clear that text properly.
Related
I want to put .image exactly behind .description-wrap. I've tried using padding and margins to center it but no go.
.image img {
display:block;
margin: 0 auto;
width:30%;
bottom:100px
}
https://jsfiddle.net/vsdLk90s/
I have made some changes to your code and explained them in comments.
.image {
position: absolute; /* Out of flow of current structure */
width: 70%; /* To regain the width of previous layout */
margin-top: -15%; /* Align it vertically */
z-index: -1; /* Priority reordering, place the image underneath the text */
}
JSfiddle
We are currently struggling trying to break out of an div having overflow hidden.
We have a dropdown-menu that gets filled with suggestions when the user type (type 'c' in the search field to see). This dropdown-menu is currently hidden behind the menubar, because it has "overflow hidden".
We can break out, if we remove the top:100% and set position to fixed. But we would like it to stay absolute (i.e. for mobile devices).
Created an example here: https://edukarma.com/bootstrap/
The dropdown suggestion list can be found in .headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu.
I ran into this issue and it can be quite frustrating. However after reading this article, I found the suggested answer to be quite satisfying.
Essentially, You must specify an outer parent (add a 'grandparent' tag) to be explicitly position:relative; (with overflow unspecified) and the direct parent to be overflow:hidden; instead of having both of these CSS options directly applied on the same direct parent.
The examples provided (for completeness and in case the 2012 article is lost):
Not working
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
position:relative;
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}
Working! (The Child is free to roam anywhere)
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position:relative;
}
.parent {
overflow:hidden;
}
.child {
position:absolute;
top:-10px;
left:-5px;
}
A possible workaround is to replace overflow:hidden with the following:
.navbar .headerItem.headerSearch {
display: table; /* like overflow, creates new block formatting context */
margin-left: 180px;
padding-right: 15px;
margin-top: 11px;
}
.navbar .headerItem.headerSearch:after {
/* hack to make the table use all available width */
content: '. .';
/* with such big spacing, the 2nd dot will always wrap to the new line,
making the table-like block use the width of the container
instead of shrinking to content */
word-spacing: 99in;
/* make this helper invisible */
display: block;
height: 0;
overflow: hidden;
}
You can do this by setting the child to be position: absolute.
HTML
<section>
Parent
<div>Child</div>
</section>
CSS
section {
width: 300px;
height: 300px;
background: dodgerblue;
overflow: hidden; /* BOOM */
}
section div {
position: absolute; /* BOOM */
left: 100px;
width: 100px;
height: 400px;
background: gold;
}
Demo: http://jsbin.com/nukic/2/edit
To vertically center <a> tag i found this solution in this answer
you may use a pseudo element displayed as an inline-box using full
height of li and vertical-aligned to midlle. DEMO
body, html {
height:100%;/ needed for demo */
}
nav {
height: 50%;/* increased for demo */
width: 100%;
}
nav ul {
height: 100%;
margin: 0px;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px;/* show me li , for demo */
}
nav ul li:before {
content:'';
height:100%;
display:inline-block;
vertical-align: middle;
}
My question why we have to use a pseudo element ?
Why it's not working when I delete the pseudo element and I put just :
a {
height:100%;
display:inline-block;
vertical-align: middle;
}
Is the vertical-align have to apply to a first element (:before) and the other (<a>) will follow the vertical alignment ?
Why pseudo works?
With the before and after pseudo-elements, we can insert virtual elements before or after an element's content. They both work the same way, except that one inserts the content before the element and the other inserts the content after.
Pseudo elements forces some contents to be there in the html page and in the css stylesheet you apply a empty content with the height of 100% ie. with your tag height and now the content is occupying the space before or after (as you use pseudo) and to that align vertically with options top, middle, or bottom:
try this fiddle : just set height: 100px; and then increase manually like 200px, 300px then you will understand the exact reason
Without vertical alignment it's going to bottom as it is 100% heighty and if you use vertical-align:middle then you'll notice how the pseudo is working.
You may understand by seeing this picture:
UPDATE:
using pseudo element you are getting vertically center the text because of known height as you used height:100%; on pseudo element. As soon you will removed the height the layout will be broken.
As a tag is inline element so you made it block level element. but vertical-align: middle; only work with display:table-cell. but wait you have to use display:table in li element also.
Check the DEMO. so this piece of code will work..
a{
height:100%;
display: table-cell; /*replaced with display:inline-block*/
vertical-align: middle;
}
nav ul li {
height: 33%;
box-shadow:inset 0 0 0 1px;
display:table; /*add this line*/
width:100%; /*add width as well*/
}
I am trying to make my subnav list display horizontally rather than stacked. I have tried a few different things, but I cant figure it out. I have tried to use Float, but it messes with the width of the divs below it. Not sure why this happens.
Can anyone help me?
http://jsfiddle.net/9bued/1/
Delete the width limitation (width: 10em;) in #navwidth
Delete the width limitation as Habib suggested, then add a clearfix class to the containing ul.
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
The styles for the clearfix should always go at the bottom of your style block or style sheet.
just add to your CSS : display: inline-block;
Please take a look at: http://jsfiddle.net/yCrA8/
The blue sidebar should float next to red middle box but instead it's clearing it and sitting below...
How do I fix this? I can't set a width for the .Middle div because it has content that needs to flow outside of the browser view and be scrollable.
Cheers
See: http://jsfiddle.net/thirtydot/yCrA8/4/
One way is to use display: inline-block and white-space: nowrap.
Remove float: left from .Sidebar and .Middle, then add this:
.MainContent {
white-space: nowrap
}
.Sidebar, .Middle {
white-space: normal;
vertical-align: top;
display: inline-block;
/* if you need ie6/7 support */
*display: inline;
zoom: 1
}
#Camernon; there is a reason why your middle div is not wrap because you did not define width to your middle div for this you can define width your middle & it's parent div
CSS:
.Middle
{
background:red;
width:9125px;
float:left;
}
.MainContent
{
margin: 20px;
width: 9330px;
}
check this fiddle http://jsfiddle.net/sandeep/yCrA8/11/