I have a div with dynamic text content. The amount of text varies between one word and five or ten words (with large font). Right now, it's absolutely positioned some amount from the bottom and the right of its relatively positioned parent.
However, since the content is dynamic, it looks awkward when sometimes there is more text and the text goes further into the main area of the parent. This is because right now, the reference point of the div is its bottom right corner. Is it possible to have it positioned with the center as the reference point, as depicted above?
The parent container is just styled as normal, with position: relative; and 100% width and height
CSS for the child container is also fairly standard:
position: absolute;
bottom: 33%;
right: 33;
I've tried playing with width, max-width, and min-width, but the result is still not desirable
How about this? Compare these two fiddles using the CSS below fiddle1 & fiddle2
HTML
<div id="parent">
<div id="anchor">
<div id="child">
<h1>Some text</h1>
</div>
</div>
</div>
CSS
#parent {
position: relative;
width: 100%;
height: 100%;
}
#anchor {
position: absolute;
right: 33%;
bottom: 33%;
}
#child {
padding: 10px;
margin-right: -50%;
float: right;
}
Related
I've trying to get a layout where a a fixed-height table with two rows, the first scaling to the its content, and the second being the remaining height, and keeping its contents inside it. The height of the bottom part needs to be 'real' (not clipped by a parent or anything), such that it could have overflow: scroll, or children of height: 100%, etc.
This is what it should look like:
I got it working in Chrome, using an absolutely positioned div inside a relative table-cell:
http://jsfiddle.net/9FPqx/
The core of it:
html:
<div class="row">
<div class="cell">
<div class="absolute-fill">
Stuff
</div>
</div>
</div>
css:
.row
{
display: table-row;
}
.cell
{
display: table-cell;
position: relative;
}
.absolute-fill
{
position: absolute
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
}
With another intermediary relative div between the table-cell and the content (rather than setting relative on the table-cell itself), it works in Firefox:
http://jsfiddle.net/sXHry/
It does not work in IE. I need IE >= 9.
It seems like IE thinks the relative element with absolute child has no content height, and so gives it 0 height.
I feel like I'm so close but so far. Is there a way of solving this with just html and css? Am I on the wrong track using display: table? Or should I give up and just throw some javascript at it?
Why does it need to be a table? Can't you just let the container hide the overflow?
html
<div class="container">
<div class="top">
Top, green area
</div>
<div class="bottom">
Bottom, blue area
</div>
</div>
css
.container {
width: 250px;
height: 162px;
overflow: hidden;
background: lightblue;
}
.top {
background: lightgreen;
}
http://jsfiddle.net/sXHry/1/ and http://jsfiddle.net/sXHry/2/ (less content)
I suspect i might be missing something, looking forward to being enlightened ;)
I have a css problem. Im trying to vertically center the text in a div, which is overlaying another div, but the text won't budge.
EDIT: Here's teh JSFiddle url: http://jsfiddle.net/wgSEw/3/
The html is as follows:
<div id="footer-top">
<div id="footer-top-left">
<div id="footer-logo">
</div>
</div>
<div id="footer-top-transition"></div>
<div id="footer-top-right"></div>
<div id="footer-top-bullets">
<div id="site-map" class="footer-bullet">
<img src="<?php echo BASE_IMG_URL . 'bulletlight.png'; ?>" alt="some_text">
<span class="footer-bullet-text">Site Map</span>
</div>
<div id="report-issue" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletlight.png'; ?> alt="some_text">
<span class="footer-bullet-text">Report an Issue</span>
</div>
<div id="submit-professor" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
<span class="footer-bullet-text">Submit Professor</span>
</div>
<div id="submit-school" class="footer-bullet">
<img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text">
<span class="footer-bullet-text">Submit a School</span>
</div>
</div>
</div>
and the current css is:
#footer-top{
position: relative;
width: 960px;
height: 63px;
float: left;
background-image:url('midtilefooter.png');
}
#footer-top-left{
width: 466px;
height: 63px;
float: left;
}
#footer-logo{
width: 265px;
height: 63px;
float: left;
background-image:url('leftlogo.png');
}
#footer-top-transition{
width: 27px;
height: 63px;
float: left;
background-image: url('midblacktransition.png');
}
#footer-top-right{
width: 467px;
height: 63px;
float: left;
background-color: black;
}
#footer-top-bullets{
position: absolute;
float: left;
width: 960px;
height: 63px;
margin-left: 265px;
}
.footer-bullet{
float: left;
height: 63px;
width: 173px;
color: white;
}
.footer-bullet-text{
height: 63px;
color: white;
top: 50%;
margin-top: -31px;
vertical-align: middle;
}
This essentially, creates a basic background for the top part of the footer, then overlays a div of bullets onto that background, so that it overlays without obscuring or messing with the background. The bullets are displaying in the correct places and, the text is correctly placed horizontally, but I can't get it to center vertically at all. Any help would be appreciated, as well as any general advice on css, Im pretty new to it, and it's giving me a run for my money. Thansk a lot!
to center a div vertical
html
<div id="parent">
<div id="child">Content here</div>
</div>
css option 1
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
We begin by positioning both parent and child divs. Next we set the
top and left values of the child to be 50% each, which would be the
center of the parent. However this sets the top left corner to be in
the center so we’re not done.
We need to move the child up (by half its height) and to the left (by
half its width) so it’s center is what sits in the center of the
parent element. This is why we need to know the height (and here the
width) of the child element.
To do that we give the element a negative top and left margin equal to
half its height and width.
Unlike the first 2 methods this one is meant for block level elements.
It does work in all browsers, however the content can outgrow its
container in which case it will disappear visually. It’ll work best
when you know the heights and widths of the elements.
css option 2
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
The idea with this method is to try to get the child element to
stretch to all 4 edges by setting the top, bottom, right, and left
vales to 0. Because our child element is smaller than our parent
elements it can’t reach all 4 edges.
Setting auto as the margin on all 4 sides however causes opposite
margins to be equal and displays our child div in the center of the
parent div.
Unfortunately the above won’t work in IE7 and below and like the
previous method the content inside the child div can grow too large
causing it to be hidden.
css option 3
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
In the css above I’ve set top and bottom paddings on both elements.
Setting it on the child will make sure the contents in the child will
be vertically centered and setting it on the parent ensures the entire
child is centered within the parent.
I’m using relative measurements to allow each div to grow dynamically.
If one of the elements or it’s content needs to be set with an
absolute measurement then you’ll need to do some math to make sure
things add up.
For example if the parent was 400px in height and the child 100px in
height we’d need 150px of padding on both the top and bottom.
150 + 150 + 100 = 400
Using % could throw things off in this case unless our % values
corresponded to exactly 150px.
This method works anywhere. The downside is that depending on the
specifics of your project you may need to do a little math. However if
you’re falling in line with the idea of developing flexible layouts
where your measurements are all relative you can avoid the math.
Note: This method works by setting paddings on the outer elements. You
can flip things and instead set equal margins on the inner elements. I
tend to use padding, but I’ve also used margins with success. Which
you choose would depend on the specifics of your project.
source
I want to align a div to the bottom of the PAGE, not to the bottom of the screen. When I do this:
#contact-block{
position: absolute;
bottom: 0; left: 0;
}
, the div is placed in the bottom area of the screen. When my page is long, I have to scroll down and the div which should have been at the bottom, floats somewhere in the middle.
There might be a simple solution to this, but I'm just not seeing it.
Here's my HTML:
<div id="left">
<div id="submenu"> <span class="menutitle">Services</span>
<ul>
</ul>
</div>
<div id="contact-block">
<span class="contacttitle">Contact</span></div>
</div>
<div id="content">
</div>
I've also added a little image to illustrate what I mean:
The red div is the contact div.
Edit:
I've found a solution with jQuery and CSS. This might not be the best solution, but hey, it works.
jQuery:
var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60;
$("#contact-block").css("top", offset);
$("#contact-block").css("left", $("#wrapper").position().left);
CSS:
#contact-block {
position : absolute;
width:216px;
height:100px;
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c;
}
You could absolute-position the your divs in place. This technique requires a #wrapper element, which I'm not a fan of, but hey, you gotta do watcha gotta do.
In this example I removed the #left div entirely as it was only required for layout purposed and is no longer necessary.
HTML:
<div id="wrapper">
<div id="submenu">This is services</div>
<div id="contact-block">This is contact</div>
<div id="content">This is content</div>
</div>
CSS:
#wrapper {
position: relative;
width: 960px;
}
#submenu {
position: absolute;
left: 0;
top: 0;
width: 320px;
height: 320px;
}
#contact-block {
position: absolute;
left: 0;
bottom: 0;
width: 320px;
height: 160px;
}
#content {
position: relative;
left: 320px;
right: 0;
top: 0;
width: 640px;
height: 640px;
}
//#content position is relative for the #wrapper to stretch.
//The left property is equal to the width of the #submenu or #contact-block element
A good point of this technique is that it gives you cleaner HTML. I believe it will be easier to make a mobile version of your version if the need arise.
The jsfiddle
Additional thought:
The #wrapper element could easily be removed in favor of you body element, which is a great step towards semantic HTML. Check this out!
The position of your absolute positioned element depends on the first ancestor-element, which is not positioned static ( which is the default, so you have to explicitely set it to relative(or absolute) ).
So, make sure, your enclosing #left container has 100% document-heigth and position:relative, and everything is well.
I would suggest putting the red div inside the right long div and at the end of it. Then use position: relative and negative left margins on the red div to push it out to the left. This way, as your right div expands, your red div always stays at the bottom of it.
Exactly as the title says, I have an element that dynamically resizes itself to fit the content. I would like this element to be positioned proportionally to its size (so it stays centered on a fixed point). The problem I'm facing is that the parent element I'm using to position the child element is not inheriting the calculated size of the child element. I don't know if there's any CSS tricks to make the parent element get it's child's height without having to specify it using javascript.
The following fiddle demonstrates the problem, with the issue being displayed on the left and the desired final product on the right (minus the ability to do it dynamically).
http://jsfiddle.net/YEcx6/
The html:
<div class="parent">
<div class="child">This content is dynamic</div>
</div>
<div id="static" class="parent">
<div class="child">This content is static</div>
</div>
and the CSS:
.child {
position: relative;
right: -50%;
top: -50%;
}
.parent {
position: absolute;
top: 50px;
left: 10px;
background: #ddd;
}
#static {
left: 100px;
height: 54px;
}
.child {
background: red;
max-width: 50px;
}
== EDIT ==
I now know there is no way to do any relational positioning with regard to height without using javascript.
What about height:auto and width:auto on the parent ?
The problem is in order to get the vertical positioning to work right, you need to have a defined height to reference by. Since you want a dynamic height, it makes it challenging. I tried using negative margin-top instead of top but that, as I suspected, defaults to using the width of the element to determine the height offset (which does not achieve your effect). I found a solution that might work for you if you can compromise by setting the position of the upper left corner of the .child rather than the upper left corner of the .parent. Here is the solution, with the explanation following (this was only tested in FF).
HTML
<div class="parent">
<div class="child">This content is dynamic
<div class="bkg"></div>
</div>
</div>
CSS
.parent {
position: absolute;
top: 50px;
left: 10px;
}
.child {
position: relative;
}
.bkg{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
bottom: -50%
left: -50%;
right: 50%;
background-color: #ddd;
z-index: -1;
}
The .parent now is supposed to be the final position of the upper left of where .child will be. The .child contains the content you want but gives a relative position by which .bkg will be related. By giving .bkg a width and height of 100%, that set's its size, which apparent is enough to correctly then calculate the correct 50% offsets to reposition it down and to the left (which is the same relationship you wanted for your original look).
I'm designing a website which has fixed elements on the outer edges of a fixed-width layout. A div in the center is reserved for the content.
When the user scrolls, I want all of the content (besides said fixed outer navigation elements) to stay within the borders of that center element.
Here's a quick mockup of what I mean:
I could very easily set the overflow property of the center element to auto, and have everything remain inside. However, it's very important that a scroll bar not be present on the edge of that element.
Basically, I'm wondering how to either:
Restrict content to that area
(perhaps I could change the size and
positioning of the body element -- is
that allowed? -- and then position
the fixed elements outside of the
body.
Hide the scroll bar that appears
inside the div when using
overflow:auto
Any help would be greatly appreciated!
If possible, you should break your fixed position elements up into 4 separate sections (top, left, right and bottom). Then just make sure you pad you centre content area by their respective widths and heights so the content doesn't get overlapped:
HTML
<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="content">
<!-- Your content -->
</div>
CSS
html, body {
height: 100%;
}
#top, #left, #right, #bottom {
position: fixed;
left: 0;
top: 0;
z-index: 2;
background: red;
}
#top, #bottom {
width: 100%;
height: 20px;
}
#bottom {
top: auto;
bottom: 0;
}
#left, #right {
height: 100%;
width: 20px;
}
#right {
left: auto;
right: 0;
}
#content {
position: relative;
z-index: 1;
padding: 25px; /* prevent content from being overlapped */
}
You can see it in action here.
Also note the position: relative on the content area. This is so z-index works correctly and the content is displayed below the fixed sections.
If you care about IE6/7 support, you'll need to add a CSS expression fix to get fixed position working properly in those awesome browsers.