Here is my setup:
I have a comment container div. Inside this div, I have three more divs. Two are float-left, and one is float-right.
http://imgur.com/hkLI5
These 3 divs have around them rounded-corner borders. I think it is pretty easy to tell which ones in the above image are float left and float right.
After the three floated divs, there is an invisible "clear" div,
<div style="clear:both; border:none;"></div>
My problem is, I can't seem to find a way to make the "some test info" div slide all the way to the bottom of my comment (so that its bottom is right above the top of the "clear" div.
Float doesn't work like that; elements will always float to the top like [insert simile here].
You'll probably have to abandon the float method and use absolute positioning, something similar to
bottom:0;
left:0;
If you do this, you'll need to set a top property also, so it doesn't stack on top of the stats section.
Add the comment div inside a container div and add the "some test info" div inside this container too, this makes it an easy css style which will make always edit div below the comment div
<head>
<style type="text/css">
div.comment_and_edit_container {
float:left;
}
div.comment, div.edit {
display:block;
}
div.comment {
min-width:500px;
}
</style>
</head>
<div class="comment_and_edit_container">
<div class="comment"></div>
<div class="edit"></div>
</div>
Related
I have three divs and am floating the first left. The other two wrap around it to the right fine if only the floated element has a width set. But if I set a width for the other 2 divs too, they no longer wrap around the first, just stack up below as in normal flow fashion.
I understand I would need to add the same float class to divs 2 and 3 to get them to float inline, but I was curious as to why this behavoir occuers if all three have widths (even if the widths add up to less than the available broswer window width). Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
background-color: steelblue;
padding: 10px;
width: 200px;
}
.two {
background-color: orange;
padding: 10px;
width: 200px;
}
.three {
background-color: red;
padding: 10px;
width: 200px;
}
.float {
float: left;
}
</style>
</head>
<body>
<div class="one float">
<p>I am paragraph one</p>
</div>
<div class="two">
<p>I am paragraph two</p>
</div>
<div class="three">
<p>I am paragraph three</p>
</div>
</body>
</html>
This might be best explained with a few pictures. First let’s get rid of your third div as it really isn't needed to explain what’s going on.
When you float your first div and don’t give the second div a width, you get this:
The first (floated) div is taken from the normal flow and placed along the left side of its container, where text and inline elements will wrap around it, as floats are supposed to do. What actually then happens is the second div acts like it’s placed behind the first div as you can see when you inspect the document:
Notice how the second div doesn't start at the right edge of the first div – it actually exists in the same space as the first div (appearing as if it was behind it); however the text in the second div begins where the first div ends. The second div then proceeds to take up 100% of the width of its container since it's a block level element. Only the text inside the div is being manipulated by the first floated div.
Now, what happens if we then set a width on the second div? Well you get the following:
So the question is, why does something as simple as setting the width on the second div appear to nullify the float rule on the first div? Well, it’s not. Here’s what’s going on. Just like in the first example, the second div appears to exist behind the first div, however this time you’re explicitly limiting the amount of room the text has to exist. Again if we highlight the second div in the document you’ll see the space it occupies:
Since in this case you’re explicitly setting a width of 200px, there is no space to the right of the floated div for the text to exist, so it gets pushed down below the floated div. Here’s an image that might make it all clearer. Let’s say we increase the width of the second div from 200px to 250px. We then get this:
Now that there’s room to the right of the first div, the text will begin next to it, and drop down below it once it runs out of room horizontally. Continue to increase the width of the second div and you’ll end up with the text of both divs existing next to each other horizontally.
What you want to take away from this is that setting a width on the second div doesn't kill the float rule of the first div, it just limits the amount of room for content to exist.
To quench your curiosity....div's are by default, block level elements....since you haven't clear'ed the float after the 1st block, they still have the effect on the container....
and since block-level-elements occupy the whole width,and the float effect still exist you have them wrapping around the floated div...
clear the divs and u'll see a different version quench your curiosity here
you can do
div {
display: inline-block;
}
Currently they are display block by default. And the default width of a block is 100% so thats why they appear below each other
First: please see this fiddle: http://jsfiddle.net/gamehelp16/77ssr/
So, these images:
(source: placekitten.com)
Uses the float:right property
and this image:
(source: placekitten.com)
uses the float:left; property
And if you see at the fiddle the third image (with the float:left ones) is not located beside the second image (the big ones)
My question is: how to make the third image is on the right side of the second image. I need pure CSS solution
Thanks
Update:
i've figured out an alternative way to do it. it's by setting the second image's float to left :D
You could float the big one and have the little ones set to block display. View on JSFiddle.
html
<img src="http://placekitten.com/200" id="left">
<img src="http://placekitten.com/100">
<img src="http://placekitten.com/100">
css
img:not(#left) {
display: block;
}
#left {
float: left;
}
To move them as a unit, you could set them in a parent container element like this.
The float element of css is relative to the page not the actual elements, i'll recomend you make 2 divs, and inside these divs the imgs to position, or you can simple use top or left elements. The choise is yours.
Appologies for a duplicate question, but none of the answers to the other questions seem to fix my problem. I would like to align a div in the center of the page. The div must only be as wide as the content inside it. It will be used as a modal popup. I have setup a jsFiddle here: http://jsfiddle.net/PDzNj/11/
The div aligns its left side in the middle and not the center of the div (which is the desired effect)
Thank you in advance for any help
One option is to emulate a table with the <div>'s surroundings.
<div class='outer'>
<div class='inner'>
<div class='thebox'>Contents</div>
</div>
</div>
And then use the CSS:
div.outer {
display:table;
width:100%; //Or however wide you want the container to be
}
div.inner {
display:table-cell; //This allows the use of vertical-align
vertical-align:middle;
text-align:center;
width:100%;
}
div.thebox { //Your variable-width container
display:inline-block; //Makes it obey text-aligning.
}
You can of course add height values as needed. This is neater, CSS wise, than making it relative, or using margins, and also disrupts the surroundings less.
I have this fiddle
http://jsfiddle.net/JsZ9q/5/
I am trying to get the div with the 'b' letters to have its left edge be up against the right edge of the div with the 'a' letters.
The trick is, in the actual application, the left property of the left div is not set (meaning its left position will change), and there is variable number of a characters (meaning its width will change).
Update -- i added some more divs to be more clear. In all cases, I want the 'right' div to have its left edge up against the right edge of the left div, which can vary in width due to its content. Also, not shown, is that the left property of the left div can vary across rows.
Try:
<html>
<head></head>
<body>
<div>
<div style="display:inline">b</div>
<div style="display:inline">a</div>
</div>
</body>
</html>
Note: Span are inherently inline:
The above should behave the same as this:
<html>
<head></head>
<body>
<div>
<span>b</span>
<span>a</span>
</div>
</body>
</html>
Edit: Based on fiddler
Remove the absolute position from div's in the style sheet.
Don't put white space between the div's this includes newline (as multiple white space will be replaced by a single space but this has size).
<div style="top:10px">
<!-- ^^^^^ No absolute here -->
<div style="display:inline">aaaa</div><div style="display:inline">bbbb</div>
<!-- ^^^^^^ No Space here -->
</div>
See here:
http://jsfiddle.net/sNqpP/ Where I have changed it for the first line aaaabbbb but not for the others.
Your solution:
http://jsfiddle.net/JsZ9q/9/
Add float: left;, replace position: absolute; with position: relative; to make this work, and set margin-left (or left) to 0. You can ignore the clear attributes - I only added that for readability.
Btw, this example screws with the basic reasons CSS was separated from HTML - HTML creates the structure; CSS provides the styling.
At no point should you EVER use the style attribute in your HTML, especially since the divs have a width that is only defined at runtime and you're only running this in CSS (no JS). And finally, avoid absolute positioning as much as possible.
Float does this:
.left {
float:left;
}
.right {
float:left;
}
http://www.w3schools.com/cssref/pr_class_float.asp
Or am I missing something in your question?
If you must use absolute positioning, you need to know the width of the leftmost div. That would involve some JS. Let me know if thats your problem.
use a wrapper for positioning: I Forked your Fiddle
You need to have a parent object with a width in order to float child objects right next to each other: http://jsfiddle.net/alanweibel/6aGbU/
<style type="text/css">
.wrap
{
width:100%;
}
.left
{
float:left;
}
</style>
<div class="wrap">
<div class="left">aaaa</div>
<div class="left">bbbb</div>
</div>
I have a layout where there are two items floated right and another item floated left. In between I want to have a div that clears only one the second of the right floated item.
E.g. I have a layout with a div floated to the right of the page, then a floated image on the left, and another floated image on the right. I want to clear only the image that is floated on the right but not the whole div.
Is there a way to clear only one of the floated items on the right. See http://www.davidapfel.com/testimonials.html, I want to put the image higher up and then put a div underneath the floated image but next to the bar on the right.
Is there any way to do this, or any other easy way of accomplishing this, perhaps without using float?
Thanks very much
Something like this?
JS Fiddle
HTML
<img height=200 src='/img/top-bg.png' />
<div id='container'>
<img height=100 src='/img/top-bg.png' /><br />
my text
</div>
CSS
img{
float:left;
width:30px;
margin-right:10px;
}
#container {
float:left;
}
#container br{
clear:left;
}
It doesn't involve nested divs, just one to keep the br from clearing the second image.
Wrap the image that's floated to the right in a div, and float the div right not the image, then you can add clear:right; to your div class and padded as needed.
You can also float your h2 tag, or make it display:inline-block and that will let you move your right side image up a little more right now the h2 is going across the page pushing everything down.