how to make a div to float down?

I have 4 divs. One is outer wrapper, and other 3 are header, content and footer respectively. All the are of same(fixed) width. But height of outer wrapper and content div are variable. irrespective of the size of these, i want the footer div to stick at the bottom of outer wrapper. I have tried using the following CSS

position: relative; bottom: 0px; 

That CSS snippet is saying, «place the bottom border 0x away from (relative to) where it would usually be.»

Do you want the footer div to be below the content div irrespective of the height of the wrapper div, or do you want the footer to stick to the bottom of the wrapper div irrespective of the height or the content div? Just want to know if the height of the wrapper div can be greater than the heights of header + content + footer divs?

6 Answers 6

To align a div to the bottom, first you have to make the parent div’s position relative, then make the required div’s position to absolute and set the bottom property to zero.

Don’t you mean «make the required div’s position to absolute,» since you wrote that in your code block?

The footer div will need to be either:

• position:absolute;bottom:0; ; This will push it to the bottom of its container, however, when you scroll down past the container, the footer will scroll with it.
• position:fixed;bottom:0; ; This is used more often for sticky footers. This will place the footer at bottom:0 of your screen. so no matter where you scroll, what you see is what you get (it will not move around while scrolling)
• position:relative;bottom:0; ; could be used, but it will be relative to it’s siblings (i.e. unless the content div is pushing it to the bottom, it won’t go there), or, I believe if the container is relative then it may work (but please correct me if I’m wrong).

Based on your question: i want the footer div to stick at the bottom of outer wrapper. it sounds like you want to use absolute positioning for the footer, so that it’ll always stick to the bottom of its container.

If you want the footer to stay on the bottom of the screen no matter where the user scrolls to, then I’d recommend fixed positioning.

you can make us a jsfiddle and maybe it’ll shed more light on what you’re trying to accomplish. good luck!

Источник

How to align floated elements to the bottom of their container

You mean just by using margin-top:[number]px; or something more advanced than that? You can use padding-top: [number]px; and padding-bottom: [number]px; if you wish to make the date element as big as the title element.

3 Answers 3

You can use absolute position. Wrap title and date with a div and set its position to absolute.

 
 
Test Title
 
23 October 2013
 
 
ddd
 
 

.titlebar < height: 50px; border:1px solid #000; position: relative; >.bleh < position: absolute; bottom: 0px; left: 0px; >#title < font-size: 20px; font-weight: normal; float: left; margin:0 >#date < font-size: 12px; font-weight: normal; float: left; margin-left: 30px; margin:0 12px >.buttonArea < position: absolute; overflow:auto; height:40px; top:5px; right: 0px; >.button < margin:0 auto; width:60px; height:40px; background:#0000ff >.icon

OR Table Example:

 
 
Test Title
 
23 October 2013
 
 
 

.titlebar < display: table; height: 50px; border: 1px solid #000; width: 100%; >.col-1, .col-2, .col-3 < display: table-cell; >.col-1 < white-space: nowrap; vertical-align: bottom; width: 1%; >.col-2 < text-align: center; width: auto; >.col-3 < text-align: right; width: 1%; >#title < font-size: 20px; font-weight: normal; display: inline-block; margin: 0px; padding: 0px; >#date < font-size: 12px; font-weight: normal; margin-left: 12px; margin-top: 0px; margin-right: 12px; margin-bottom: 0px; display: inline-block; padding: 0px; >.button < width: 60px; height: 40px; background: #0000ff; margin-top: 5; display: inline-block; >.icon

Thanks for your answer, but it doesn’t satisfy the first 2 of my requirements in the bulleted list?The length of the title will push the date across (but doesn’t need to wrap) The blue button is always centrally aligned between the date and the red icon

Ok so why don’t you use display as table and play around with it? Do you want me to give you an example?

That’s it! Great, thanks. You have the red/blue objects the wrong way round in your fiddle, but easily fixed.

Here is one way to do it but it involves some extra mark-up.

I added some wrappers around the title and date as follows:

 
 
 
 
Test Title
 
23 October 2013
 
 
 
 
 

.titlebar < height: 50px; border:1px solid #000 >#titleArea < height:40px; margin-top:5px; float: left; >#table-wrap < display: table; height: 100%; >#table-cell < display: table-cell; height: 100%; vertical-align: bottom; >#title < font-size: 20px; font-weight: normal; padding:0; display: inline; >#date < font-size: 12px; font-weight: normal; padding-left: 12px; display: inline; >.buttonArea < position:relative; overflow:auto; height:40px; margin-top:5px; border: 1px dotted blue; >.button < margin:0 auto; width:60px; height:40px; background:#0000ff >.icon < float:right; background:#ff0000; height:40px; width:60px; margin-top:5px; border: 1px dotted blue; /* for demo only */ >

I created an outer wrapper #titleArea that has the same height and top margin as the #buttonArea .

Within #titleArea , I created a CSS table/table-cell (two nested div’s) so that I can get the vertical alignment to be at the bottom.

Finally, I set display: inline to #title and #date .

A detail that may need adjustment involves the base line of the title and time. The bottom leading causes the text to sit slightly above the bottom edge of the button.

It seems like a lot of work for what appears to be a relatively simple requirement.

To make this a bit more bullet-proof, I would add a min-width to the .titlebar to prevent the .buttonArea to develop a horizontal scroll bar and the .icon from wrapping to a second line.

Источник

Float an Element to the Bottom Corner

Need to lay out an element to the right or the left, such that text wraps around it? That’s an easy task for the float property. But what about if you also want to push that element (let’s call it an image) to one of the bottom corners while we’re at it? Sounds a bit tricky, right? We probably need JavaScript? Nope, few lines of (tricky) CSS can do it! Here’s the CSS-only solution that will make your image to stick to the bottom corner, regardless of the size and content. Resize the wrapper element and see the magic at work:

We’ll need a wrapper element to contain everything, and we’ll be using flexbox on it. Flexbox allows us to rely on the default stretch alignment to be able to later use height: 100% .

The .box within the .wrapper is our flex item. We don’t need any particular CSS applied to the box. It defines the height of the wrapper and, at the same time, is stretched to the same height. This behavior will give us a “reference height” that can be used by the child elements. From the specification:

If the flex item has align-self: stretch , redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

The keyword is the definite which allows us to safely use a percentage (%) height inside the box element.

Now for the floated element

Our .float element will take the entire height next to the text content, thanks to the height calculation we detailed above. Inside this element we push the image to the bottom using flexbox alignment. Now for the real trickery, using the shape-outside property. Here’s how MDN defines it:

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

In other words, shape-outside sets the way content flows around an element’s bounding box. It takes a number of values. One of those is the inset() function which, again, according to MDN:

Defines an inset rectangle. When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle.

So, with shape-outside: inset(calc(100% — X) 0 0) we can create an inset rectangle that starts exactly at the top of the image. And the top is equal to 100% — X , where X is the image height and 100% is the height of the .float element. This allows the text to wrap within the free space on the top of the image. This is responsive, plus we can easily switch between left and right (by adjusting the float property) That’s it! The only major caveat is that you need to know the image height.

We can extend this concept a little further to account for fancier situations. For example, we can float the image to the right, but pin it to the middle of the box with justify-content: center : and also adjust our inset rectangle to the middle by changing the shape-outside from inset(calc(100% — X) 0 0) to inset(calc(50% — X/2) 0 0)

Nothing complex here. I am simply using the same floating element twice, once on the right, and again on the left. And why stop at two corners when we can place images at all four corners:

The same basic idea is at play here, but we’re are also relying on the common float feature for the top images. However, you’ll notice that this is where the concept starts to break down a bit, and we get some unwanted overflow depending on the size of the containing box. We can make the height of the .float element greater than 100% and apply somewhat “magic numbers” that smooth things out by adjusting the padding and margin of the images. Did you know that shape-outside accepts radial-gradient() as a value? We can use that to place rounded images like below:

The transparent part of the gradient is the free space where the text can go. You may have noticed that we applied a border-radius to the image as well. The shape-outside property will simply affect the .float element and we need to manually adjust the shape of the image to follow the shape defined by shape-outside . While we’re at it, let’s combine this with our earlier example that pins the image to the vertical center of the box using justify-content: center :

Another radial-gradient() and also another border-radius configuration. We could have used a linear-gradient() instead to make a triangular shape for the wrapping area:

This is the same idea that we used for the radial-gradient() . The big difference is that we’re using clip-path instead of border-radius to cut our image. And, since we did it for the others, let’s use the justify-content: center idea to pin the image to the vertical center of the box’s right edge:

We used a conic-gradient() in the above demo with shape-outside to define the triangular shape and clip-path to get a similar shape on the image All of these examples can still be optimized using less of code in the case that the image is decorative (when it’s not needed inside the HTML for SEO purposes). Let’s replace the .float element with a pseudo-element and apply the image as background instead:

We’re using mask to show just the portion of the image that we need and, guess what, it uses the same value as shape-outside ! So, all we had to do is define one value for the shape.

• Adjust the shape-outside property to define the shape
• Apply some styling to the image to follow the previously defined shape or apply the same value to mask in case we are using the pseudo element version

Then everything holds it place, even in responsive designs.

Источник

How to make float bottom?

I want to show class «price» at the very bottom . Actually it can use the margin, but the problem is the class description, class description is the dynamic How to make class «price» at the very bottom? Thank you

1 Answer 1

That said, you can add padding-bottom to your .description and set the .price to position: absolute; and position it in the left bottom corner. The padding-bottom is the space that the price comes in, so play around to your needs. See my example below.

 
 
 
 
 -->   -->
 
Nana hotel
 
Nana hotel is the best.Nana hotel is the best.Nana hotel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, modi ipsum natus provident molestias magni culpa ab cumque, quo, deleniti fugiat adipisci sequi suscipit porro maiores! Quod quibusdam modi consectetur!
 
Price : 123 / night
 
Detail   More 
 
 
 
 
 
 

Here’s a better solution, without using tables. Check out the code below and play around with it to your needs. display: flex; is the way to turn your ‘design’ easily in to what you want.

Please consider that in the future you need to do your own work. We’re not employees ready to do whatever you want.

.description < padding-bottom: 20px; >.container < width: 650px; border: 2px solid black; display: flex; flex-flow: row wrap; >.image < width: 200px; flex-basis: 200px; >.image img < width: 200px; >.content < flex-basis: calc(100% - 200px); padding-left: 10px; box-sizing: border-box; >.info-container < display: flex; flex-flow: row-wrap; justify-content: flex-start; >.price < color: #c80000; font-size: 16px; >.buttons

 
 
 
 
Nana hotel
 
Nana hotel is the best.Nana hotel is the best.Nana hotel is the best.
 
Price : 123 / night
 
Detail   More 
 
 
 

Источник