I have a problem with a float which overflows (JSFiddle here).
HTML
<div id="father">
<div id="son">
gruik
</div>
<div id="dog">
gruikgruik gruik gruik gruikg ruik gruik gruikgr uikgruik gruik gruik gruik
</div>
</div>
CSS
div { border: solid; }
#father { width: 300px; position: relative; }
#father:after { content: ""; display: block; clear: both; }
#son { width: 100px; float: left; border: solid red; }
#dog { float: left; border: solid blue; position: absolute; left: 105px; }
As you can see, #dog overflows from #father. I tried classical CSS techniques but they just do not work (neither the clearfix method, nor overflow:hidden; or overflow:auto;).
I think the problem appears because of the use of the position CSS properties but I need it.
position: absolute; is correctly positioning the #dog element relative to #father (because #father has position: relative;).
However it is only the #son element which is giving #father its height. Elements positioned absolutely are taken out of the flow and therefore if #dog increases in height, its parent container (#father) will not, and therefore #dog looks to be overflowing.
Why do you have to use position: absolute; on #dog?
Can you not just use float, and set its width? You are setting its parent and siblings widths anyway so you know what width it should be (if you specify the width of the borders too).
DEMO: http://jsfiddle.net/sgw4K/5/
EDIT/UPDATE: After discovering additional styling, thirtydot has recommended two sound fixes to the problem. See comment below or the following:
To fix that, you can remove float: left from #son and then pick one of
these two choices: margin-left: 52px or overflow: hidden; on the #son element.
Related
I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.
HTML:
<div id="thebag">
<h3> Shihab Mridha </h3>
</div>
CSS:
#thebag{
position: relative;
overflow: hidden;
}
#thebag::before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 30%;
background: red;
}
#thebag::after {
content: '';
position: absolute;
top: 0;
left: 30%;
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 70px solid transparent;
}
https://jsfiddle.net/kn87syvb/1/
You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.
https://jsfiddle.net/kn87syvb/2/
By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.
So you have to add this :
#thebag h3 {
position:relative
}
To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.
May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/
You need to use postion:relative property:
#thebag h3{
postion:relative;
}
Small explanation:
position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).
However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.
please check this snippet:
https://jsfiddle.net/kn87syvb/4/
You can also re-structure your HTML and CSS as follows:
HTML
<span class="start">Shihab Mridha</span>
<span class="end"></span>
CSS
.end {
height:0;
width:0;
float: left;
display: block;
border:10px solid #0f92ba;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#0f92ba;
border-left-color:#0f92ba;
}
.start{
height: 20px;
width: 60px;
float: left;
background: #0f92ba;
display: block;
color:#FFFFFF;
}
Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/
I have a holder div that has specific dimensions, and has a single child element of varying height, and I am trying to align it to the baseline. Currently, I have a second element that is the same fixed height as the container which makes it aligned to the bottom, but if it is on its own, it sticks to the top, regardless of what rules are applied.
So, how can I vertically align an element to the bottom of a container if it is the only child element?
EDIT
While in the process of putting up the code that I am using, I came up with a solution which I have posted. The initial problem is similar to that, but without the position rules, and display:inline-block on the child elements. That is pretty much the long and short of it...
Damn it, thought of a solution after posting the question which works nicely:
Parent Element:
.parent {
height:200px;
position:relative;
width:200px;
}
Child Element:
.parent > * {
bottom:0px;
left:0px;
position:absolute;
right:0px;
}
The height of the Child element is then defined by block elements within it, but it sticks to the bottom
One way using table-cell
Assuming the bare bones markup:
<div class="wrap">
<div>Some content...</div>
</div>
the following CSS will do it:
.wrap {
border: 1px solid red;
height: 200px;
width: 200px;
display: table-cell;
vertical-align: bottom;
}
Major advantage: works with both inline and block level elements.
Disadvantage: Older browsers don't recognize display: table-cell
Demo at: http://jsfiddle.net/audetwebdesign/eXKbt/
Alternate way using inline-block
You can also do it this way by applying the following CSS:
.wrap2 {
border: 1px solid red;
height: 200px;
width: 200px;
}
.wrap2:before {
content: "";
width: 0;
height: 190px;
display: inline-block;
}
.wrap2 div {
display: inline-block;
width: 190px;
border: 1px dotted red;
vertical-align: bottom;
}
However, this approach involved using a pseudo-element to define a fictitious inline block to set a baseline nearly the full height of the box and then using vertical-align on the child element. There were some issues related to the width but it can be made to work.
See earlier fiddle for demo.
Not much detail to go off of, but maybe something like this
.container {
position: relative;
}
.child-element {
position: absolute;
bottom: 0;
}
Consider this fiddle: http://jsfiddle.net/qkAJD/
HTML
<div style="width:500px;">
<h1 class="success-header" title="Success!">Success!</h1>
</div>
CSS
body {
background: gray;
margin:0;
}
.success-header {
color: green;
display: inline-block;
font-size: 50px;
height: 50px;
margin: 0;
}
.success-header:before {
content: attr(title);
position:absolute;
color:rgba(255, 255, 255, 0.3);
top:1px;
left:1px;
}
Result
Question
How can we center the <h1> tag within its container, and still keep the letterpress effect? Assume that we don't know in advance that the container's width is 500px. That is, a solution which hardcodes the position of the header is not acceptable. It's easy enough to center the header:
<div style="width:500px;text-align:center">
<h1 class="success-header" title="Success!">Success!</h1>
</div>
But this destroy's the letterpress effect:
The "shadow" is positioned absolutely with relation to its nearest eligible parent. You can make the immediate parent eligible by adding position:relative to it.
Example: http://jsfiddle.net/qkAJD/5/
.success-header {
color: green;
display: inline-block;
font-size: 50px;
height: 50px;
margin: 0;
position: relative; /* changed line */
}
Absolute - Do not leave space for the element. Instead, position it at
a specified position relative to its closest positioned ancestor or
to the containing block.
Source, emphasis mine.
Just add positon: relative to .success-header, since you already are positioning the shadow absolutely.
.success-header {
...
position: relative;
}
JSFiddle example.
So I have three div's
One parent and two child.
The parent is as follows:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
the two child divs are as follows
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
The trick:
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.
I want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>