Is it possible to make element absolutely positioned to bottom in its relative parent, and retain the flow of its text content from top to bottom?
This is roughly the layout I am talking about ---
<div class="relative" style="padding-bottom: 2em;">
<div style="position: absolute; bottom: 0;">Bottom! Can I have normal text flow, plz?</div>
<div style="height: 10em;"></div>
</div>
--- and here is the Fiddle: https://jsfiddle.net/x507Ljyh/
Also I am opened to any creative solutions, such as pseudoelements etc. Just no changes to orders of elements in markup, please.
Thank you!
Edit
I know, that elements with absolute position "do not take up space" and that's ok - the gray article element has generous padding-bottom because of that.
I just need the h1 element text to flow from top to bottom, as would normal element do. So the scary long title "The Idler Wheel Is Wiser Than the Driver of the Screw and Whipping Cords Will Serve You More Than Ropes Will Ever Do" would end up at the bottom end of gray article element (and, sometimes, overflow it to bottom).
This would be similar question for floats: HTML float right element order
Does that make sense?
Edit 2
Flexbox solves my issue, thanks #RoToRa! However I am still interested if flow of text content of absolute elements can be reversed to normal somehow, so I am leaving the question opened.
If you are fine only supporting newest browsers you could use flexbox layout, and change the order of the elements:
article {
display: flex;
flex-direction: column;
}
article > h1 {
order: 2;
}
article > blockquote {
order: 1;
}
https://jsfiddle.net/8pqs49qf/
Once you make an element "position: absolute;" its space is no longer taken into consideration when the page is generated. That is why your paragraph text and header text overlap. The best way to avoid this is to add padding to the bottom of your blockquote element to make the article large enough to accommodate the space the header requires.
blockquote {
padding-bottom: 100px;
}
The issue with this solution is it isn't very dynamic if you have multiple headers of different sizes.
Related
is there any solution how to move text around in header section?
I have an <h1> tag whith email and I would like to move like 20% from left side of page and 50% form right side but all I can found is text-align:right,left, etc.
I add image so you can see on top of page there is this dark box whith email and view basket. How can I move that text the way I like?
There's a couple of ways you can position things like that...
Positioning
You are able to position elements using absolute and relative positioning, as seen in the example below, you can use position: relative for the parent container and position: absolute for the child and then use: top, right, bottom or left and define how far away you want the child element to be from its parent. As seen in my example below.
http://jsfiddle.net/8aL05tey/4/
header.header {
position: relative;
}
header.header h1 {
position: absolute;
left: 20%;
}
<header class="header">
<h1>
email#email.com
</h1>
</header>
Flexbox
You can also responsively position elements with flexbox. Flexbox can be relatively hard to understand if you've never messed around with it, there are plenty of SO questions with explanations in it. You can also read a bit about the properties here.
Floats
Alongside with positioning, you can float divs and other elements left and right using float: left and float: right. You can ready more about floats here. :)
There are plenty of options for what you want to achieve and no real "right" answer, it's about exploring what works for you!
Have a great day!
I have a banner-image, on that image I've placed a link. This page is not getting aligned properly when I zoom-in or zoom-out the browser window or when I resize it.
The link is not getting aligned properly with respect to the image as it was showing in the default view(100% zoom ).
How to make this link responsive? I want the Read More button to be aligned exactly below the text Driving Value creation with ..... text, and the Read More link to be responsive with respect to the image on which it is present. How can I do that?
Here's my JSFiddle
<p class="homeImageLink">
<span>Read More</span>
</p>
Please help.
I am not sure this will work, but I think it would:
.image_container span
{
margin-left:-100px;
}
DEMO
DEMO1
You need to tweak your css so that the positioning is a bit more clear, I've fixed it somewhat here.
The important parts are here:
.image_container {
position: relative;
}
.homeImageLink {
position: absolute;
bottom: 10%;
right: 3%;
}
On the container, position: relative; means that any internal positioning will work from this container. Any positioning apart from static would do here and it's important no intermediate elements in the tree have position set or it will work from that element instead.
The the link container itself is position: absolute; with % values used to keep it proportional to the size of the container. Note also that right is used instead of left so the element appears relative to the right of the container. Now it will never go off the right hand side of the image.
To make this clearer I've removed all the other css from the example and as you can see it still demonstrates the effect you desire.
I want to create a set of the newest messages that have been posted on my page. Those boxes should always be the same size (as they're in a row, instead of below each other) and consist of three parts:
Heading (h3)
Content (no specific tag)
Author (span)
While it isn't that difficult to keep the heading always at the same position, I couldn't really think of a method of having the author to be always on the bottom of the box, no matter how much content there is above.
Perhaps I just think too complicated.
Thanks in advance for any help!
position: relative on the parent box, position: absolute; bottom: 0; on the author box.
I won't give you a full solution, because that would not really help.
CSS Positioning 101
you can use a wrapper set to relative from css and the span positioned absolute
HTML
<div class="wrapper">
<h3>Title</h3>
<p>Title</p>
<span class="author">Title</span>
CSS
.wrapper{position: relative; padding-bottom: 1em;}
.author{position: absolute; bottom: 0; right: 0
I would like a way to prevent columns of flowing text from becoming too narrow. For example, in a column of HTML text, there is an image floated to the left. Text flows down the right-hand side of the column around the image, as expected:
However, if the image is almost as wide as the column, then the text ends up being very narrow:
In this case I want the text to simply not flow past the image, but to drop below it as if the image were a block:
I am trying to find a simple and general way of doing this. It's for a blog - I want to be able to add the image and text, maybe add a class or paste in a bit of markup (sigh), and have the flow work. I would prefer to do it with CSS and HTML only because it's hard to insert JavaScript to the blog posts. I have a couple of methods (see my answers) but neither is satisfactory. Can you do better?
When you set display: inline-block; to an element, the element will be flowed with surrounding content.
So you would need to add a line-break <br> to produce a line break in text, but the vertical space of the line will remains as you mentioned. [and one more thing happens is the horizontal scroll-bar which will appear if you decrease the width of the panel.]
Introduction
Using <table></table> element has a lot of benefits here.
When you use <table> element (as the following), it causes the content goes to the next line. And when the remain horizontal space gets lower than width of the <table>, it'll go to the next line and push the content down.
And also, horizontally scroll-bar won't appear in this case, because browsers won't display the <table> when it hasn't any element inside or any specific height or border properties.
(different browsers have different behavior, Mozilla Firefox doesn't display table element with a specific border property but Google Chrome does.)
HTML:
<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...
CSS:
img { float: left; }
table { width: 12em; }
Here is the JSBin Demo.
The Solution
As a pure CSS way, I used ::before pseudo-element to create a element which behaves like the <table> HTML element.
HTML:
<div>
<img src="http://placehold.it/400x400" alt="">
<p class="content">
<!-- Here is the content... -->
</p>
</div>
CSS:
img { float: left; }
.content:before {
content: ' ';
display: table;
width: 10em; /* <-- Change the current width size */
}
Here is the JSBin demo.
A better solution is to give every paragraph an invisible CSS pseudo-element with the desired minimum paragraph width. If there isn't enough space to fit this pseudo-element, then it will be pushed down underneath the image, taking the paragraph with it.
If the img is flot: right, add clear: left to the p:before.
And if the img is float: left, add clear: right to the p:before
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
clear: left; //use clear:right if img is float:left
}
I tried adding an extra element before the text. I think this would probably just about work. Something like this:
<style>
.shim { display: inline-block; height: 0; width: 12em; }
</style>
<img class="floated">
<div class="shim"></div><br>
If one examines Derridaist reading...
This is OK - if the flow column is narrow then the shim drops below the image and the text follows it. I have to add the <br> to stop the text being indented by 12 ems, which adds a line of vertical space. I guess I could reduce the line-height on the <br>but the whole thing might end up being a bit verbose.
The simplest method I found is to set the minimum width of the column by preventing the first few words from wrapping:
<style>
.chunk { white-space: nowrap; }
</style>
<p><span class="chunk">If one examines</span> Derridaist reading...
This works well, but:
I have to manually edit the text each time I do this
I can't precisely control the column width (in ems or pixels)
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test