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.
Related
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.
I have two divs, one with float: left and the other one with float:right. They display side-by-side, but when I add a third div it displays over the two floating divs and not behind as i'm trying to.
<div id="left_side" style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>
What I want to do: http://dl.dropbox.com/u/20836988/intended.png
what I actually get: http://dl.dropbox.com/u/20836988/what%20i%20get.png
I've tried adding vertical-align: bottom to the last div without results. Also I've tried adding a div containing the two float divs and then the third div but I always get the same result. I'm sure it must be a very basic question but I can't find the answer anywhere...
below_side needs a float and a clear:both;
currently left and right are floated - which takes them out of the document flow. which means that below side ends up in the wrong spot.
if you put the float: left on the below-side it will also take it out of the docment flow and put it in the same space as the left and right (relatively) then you add the clear: both so that it appears below left and right
<div id="left_side" style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>
Add clear: both to your below_side div.
See this link.
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>
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute
ie I have a div, below is a hidden div, which is wider than the div above. I want to specify the div inside to have elements with greater widths than the div above. these elements right hand side is aligned to the right hand side of the div above, but since it is wider, want the left hand side to break out. The div below is on a diff layer than the div above as it only appears on clicking on trigger element of div above.
Basically its a drop down list, with some random elements are wider than the image element above which, when clicked drops this list. but i want the list underneath to expand to the left breaking out of the parent div, without specifying exact positions. Therefore, the elements are all children of the parent div and right aligned to it, just like parent.
Hmmm, hope you can follow. Really appreciate any help. Thanks in advance.
Negative Margins seems to be the best answer. If anyone knows of cross browser issues, please post here. Perhaps I will but shalln't be testing for them for a week or two.
You should probably just use a select tag (for accessibility's sake) even though it won't look as fancy. But if you're set on it, try something like this (and add your javascript code to hide/show the list):
#wrapper {
width: 500px;
}
#select {
border: 1px solid black;
width: 180px;
float: right;
}
#options {
float: right;
clear: right;
text-align: right;
}
and
<div id="wrapper">
<div id="select">pick one...</div>
<div id="options">
<div class="option">I'm short</div>
<div class="option">I'm a very very very very very long option</div>
</div>
</div>
If you end up using this, change the options div to a ul tag and the option divs to li tags, or something semantically closer to what you're building. I just used divs to cut down on the amount of css in my example.