I'd like to position something relatively absolutely, e.g. taking it out of the document flow and adjusting its position a few pixels. What's a neat way to do this?
Just use margin to shift the absolutely positioned element.
HTML:
<p>Lorem ipsum dolar sit amet.</p>
<p class="move">Lorem ipsum dolar sit amet.</p>
<p>Lorem ipsum dolar sit amet.</p>
CSS:
p.move { color:red; position:absolute; margin:5px 0 0 5px; }
Demo: jsfiddle.net/KXCkV
You could put your relatively positioned item within an absolutely positioned container and use top, left, right, or bottom to move it wherever you need to.
This is an example of what you need to do:
<div style="position: relative; width: 500px; height: 200px;">
<div style="position: absolute; left: 0; top: 0;">Upper Left</div>
<div style="position: absolute; right: 0; bottom: 0;">Lower Right</div>
</div>
Only way I could think to do this is to have the element styled in the document on page load and then finding its position and changing the style to position:absolute, setting the top: and left: properties programatically based on it's original location.
Related
I have the following problem:
There's an image floating left and a margin to the right.
Next to it, there is a div containing a headline and a text (I don't know any height-values of both, because it will be inserted dynamically).
The headline must align to the top and the text to the bottom. I thought it's enough to position the text absolute, but if the height of the image is smaller than the height of the headline + the text, the text flows into the headline....
I haven't found any solution to position the text at the bottom but letting it stay in document flow.
I am not allowed to use any table-elements (on the otherhand, display: table and so on is allowed, but I haven't figured out any solution with that as well)
<<<HTML
<div>
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div> <!-- float left, margin-right -->
<img>
</div>
<div> <!-- float left -->
<h5>The headline aligning to the top</h5>
<p>
Some text aligning to the bottom
</p>
</div>
</div>
</div>
HTML
Please help me, I just can't figure out any solution!
/EDIT:
Both the imnages' and text-/headline-containers' height may vary, so no fixed height.
What i got so far is (by assuming, the text wont have more than 4 lines (but thats not the best way). The next Problem is: Firefox adds the margin-bottom of .box to the bottom: 0; of the text (like: bottom: -35px; But shown as bottom: 0; ... Chrome does interpret that the right way):
<style>
.box {
width: 488px;
float: left;
margin-bottom: 33px;
margin-right: 22px;
padding-top: 5px;
}
.table {
display: table;
}
.box.wide .box-content {
display: table-row;
}
.box.wide .box-content > div {
display: table-cell;
position: relative;
width: 233px;
}
.box.wide .box-content > div:first-child {
margin-right: 22px;
}
.box.wide .box-content div h5 {
padding-bottom: 88px;
}
.box.wide .box-content div p {
position: absolute;
bottom: 0px;
}
</style>
<div class="box wide width-488">
<div>
<h4>Überschrift</h4>
<div class="table">
<div class="box-content">
<div>
<img alt="" height="401" width="233" src="res/dummy/233-130.jpg">
</div>
<div>
<h5>Überschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing eliÜberschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing elit</h5>
<p>
Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lor em ipsum dolor amet.
mehr
</p>
</div>
</div>
</div>
</div>
</div>
try using display: inline-block; on both floating elements and the text element that you want aligned to the bottom.
Then put the property vertical-align: bottom; on the text element you want aligned to the bottom.
I assumed you can make the right column a fix height, since the left column & right are the same in your image example.
I made a jsfiddle for your convenience: http://jsfiddle.net/hLPXM/
Alternately, here is what I did, based on your original code:
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div class="left"> <!-- float left, margin-right -->
<img src="http://placehold.it/150x350" alt="placeholder" />
</div>
<div class="right"> <!-- float left -->
<h5>The headline aligning to the top</h5>
<div class="bottom-text">
<p>
Some text aligning to the bottom
</p>
</div><!-- .bottom-text -->
</div>
</div>
Note I added a .bottom-text class around the <p> that you want to align bottom.
Here is the CSS for the divs to float properly, etc. Note the position:relative; :
.left {float:left; margin-right:20px;}
.right {float:left; background:#eeddff; /*background to see div*/}
.left, .right {height:350px; position:relative;}
And more importantly the text starting from the baseline:
.bottom-text {
position:absolute;
bottom:0;
}
Here is a solution for you, using display: table, relative and absolute positioning:
<div>
<h4>A headline, that isn't involved</h4>
<div style="display:table;">
<div style="display:table-row;">
<div style="display:table-cell;padding-right: 20px;">
<img style="display:block" src="http://baconmockup.com/300/200">
</div>
<div style="display:table-cell;background:green;position:relative;vertical-align:top;">
<p style="">Some text aligning to the top</p>
<p style="position:absolute;bottom:0;">Some text aligning to the bottom</p>
</div>
</div>
</div>
</div>
It does not rely on any fixed heights, and adopts to the height of the image automatically.
jsfiddle.net/EUvXh/
I don't know if you have already fixed this but the easiest way is to add margin-top: auto; to your p tag.
I want to make a menu on top of a div, so basically the text is on top of it (see example).
I want to have the text of the menu inside that same div, so the html is something like this:
<div id="text">
<div id="menu">Portfolio | About us</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Thanks in advance.
Position the div relatively (position: relative;), and then the text absolutely (position:absolute;). Make sure the text is inside an element inside the div, and then set the nested element's top position to a negative number until it is positioned to your liking.
To center it, you will need to mess about with left and right properties.
This JSFiddle just about mimicks your screenshot.
I had to add this to the #menu styling:
margin-bottom: 0;
padding-bottom: 0;
line-height: 1em;
And then this to #text p:
margin-top: 0;
And that did the trick.
Making it all centered was as simple as this:
#text {
width: 500px;
margin: 0 auto;
}
You can use relative/absolute positioning or try something like this
<div id="text">
<div id="menu">Portfolio | About us</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
And in your css:
#text{
text-align:center;
}
#menu{
margin-top:-20px;
}
See http://jsfiddle.net/rVjCB/
HTML:
<div class="menu">
<ul class="top">
<li>Portfolio</li>
<li>About us</li>
</ul>
Text
</div>
CSS:
.menu{
background:#957F00;
max-width:500px;
margin:0 auto;
color:white;
}
.menu>.top{
background:white;
overflow:hidden;
color:black;
}
.menu>.top>li{
float:left;
width:50%;
border-left:3px solid #957F00;
margin-left:-3px;
text-align:center;
}
I am trying to create a grid struture with div of equal height and width but I am unable to apply the border
CSS
.Container {
width:1000px;
position:relative;
margin:0 auto;
}
.RowContainer {
overflow:hidden;
position:relative;
height:200px;
clear:both;
}
.RowContainer .Cell {
position:relative;
float:left;
height:100%;
width:200px;
border:1px solid Black;
}
HTML
<div class="Container">
<div class="RowContainer">
<div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p> </div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
<div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
</p> </div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
</div>
<div class="RowContainer">
<div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
</p></div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
</div>
<div style="clear:both"></div>
</div>
I have two issues
1.
border is not showing in the last row.
2.
As well as the border width seems unequal despite of applying same border property to all.
If you're trying to create something that is table-like, why not just use tables?
<table class="container">
<tr>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
</tr>
<tr>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
</tr>
</table>
Bottom border is not showing in either row because you have height: 100% on the .Cell and overflow: hidden on the .Container. What you are seeing under the first row is the top border for the second row.
If you set height: 100%; on the child of an element of height: 200px that has overflow: hidden and then you set a border of 1px to that child, then that border adds up on all sides.
It makes that child element take up 202px vertically. That's 1px from top border + 200px from height + 1px from bottom border.
But the parent element has a height of only 200px and overflow: hidden, which means that vertically, from the child element, what you see is the 1px top border and 199px of the child's height. There is still 1px of its height and the 1px bottom border which are hidden.
Second vertical border is thicker than the first, because you have there both the right 1px border of the first cell and the left 1px border of the second cell.
This would solve the issue http://dabblet.com/gist/3145644
The overflow:hidden on .RowContainer is hiding the border on the .Cell divs, because border is drawn outside the .Cell's box, which is set to 100% height. Removing the overflow:hidden should reveal it again.
As for the unequal border, I can't say for sure since you didn't provide a jsfiddle to look at, but I'm guessing you mean the borders between the cells is thicker than it should be -- that's because each .Cell has a border all the way around, resulting in the left/right borders sitting next to each other, giving the appearance of a 2px border.
You can fix this by only setting border on the top and left sides of each .Cell, and then setting border on the bottom and right sides of the .Container.
remove your overflow:hidden
like this
.Container {
width:1000px;
margin:0 auto;
}
.RowContainer {
height:200px;
clear:both;
}
.RowContainer .Cell {
position:relative;
float:left;
height:100%;
width:200px;
border:1px solid Black;
}
The CSS Overflow
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.
I am styling a series of form rows. Each row div has a fixed-width label div, and a content div that can contain any number of float: left elements.
Example markup is:
<div class="Row">
<div class="Label">Label Here</div>
<div class="Content">
<div class="Item">Short Content</div>
</div>
</div>
<div class="Row">
<div class="Label">Label Here</div>
<div class="Content">
<div class="Item">
Long Content ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id eros magna. Suspendisse eu diam nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu neque massa.
</div>
</div>
</div>
CSS so far is:
.Row {
clear: left;
padding: 10px;
}
.Label {
float: left;
width: 150px;
}
.Content {
float: left;
}
.Content .Item {
float: left;
}
jsfiddle here: http://jsfiddle.net/vVy5J/2/
This looks correct as long as the contents of the content div are not wider than the remaining width in the row. If they are, the content div 'flops' down beneath the label instead and hugs the left edge of the row div: http://screencast.com/t/Iknv98R9
I need long content divs to wrap, but still be against the top of the row and flush with the right edge of the label.
The traditional solution for this is to give the content div a fixed width. But that won't fly here because the row widths vary based on browser window size, etc. and the content div needs to stretch from the right edge of the label div to the right edge of the containing row div.
Requirements: I can alter the markup only within the row div. Contents need to be elements, so text-indent won't work for me. I need to support IE7+
You could put a position:relative; on the Row, position:absolute; on the Label just to take it out of the document flow, then margin-left:150px on the Content (or however wide it's supposed to be).
It won't be good though if there's any chance of the Label being taller than the Content.
You can use simple positioning trick. #row must be relative and content is absolute with left: 150px.
.Row
{
...
position: relative;
}
.Content
{
...
position: absolute;
left: 150px;
}
jsfiddle
I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile.">
<img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" />
</a>
</div>
<span class='print-link'></span>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Is an example of the HTML
With the CSS being:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.
I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.
Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
You can check it out here:
http://codepen.io/atomworks/pen/algcz
Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)
As mentioned by #Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.
As far as I can see, the only way to have the parent div wrap the absolute positioned contents, is to use javascript to set the width and height on each change.
When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.
To get around this, you can instead use margins:
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Hopefully that will do the trick :)
In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.
<div class="clear"></div>
And CSS:
.clear
{clear:both;}
I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!
See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE
CSS
/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
content: '' ;
display:block;
float: right;
/* The height is essentially a "margin-top" to push the pullout Container down page */
height: 200px;
}
.pulloutContainer q {
float:left;
clear:both;
/* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
width: 30%;
/* Add padding as you see fit */
padding: 50px 20px;
}
HTML
<div id="container">
<div class="pulloutContainer">
<!-- Pullout Container Automatically Adjusts Size -->
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
</div>
<div class="content">
<h1>Sed Aucteor Neque</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</
...INSERT MORE TEXT HERE...
</div>
</div>
Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.
Here's a trick that might work for some:
if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:none the items you dont want to see according to the conditions you need.
Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low
Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.
There is an easy fix to this problem. It's using white-space: nowrap;
<div style="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
For example I was making a dropdown menu for a navigation so the setup I was using is
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
Dropdown link here
</li>
<ul>
Image Examples
Without Nowrap enabled
With Nowrap enabled
Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.