I have three divs:
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
I want them to be positioned like this:
A C
B
Where C should always be in the top right corner of the container they're in. How do I go about this in CSS using only the three divs and in that order?
I've tried a lot of different combinations of the float, display and clear properties to no avail.
Have you tried floating a,b to the left and c to the right? Also setting widths for your elements should help. Post some markup so we know what you have tried and how to fix it. very hard guessing these stuff.
This should work... if not please post a screenshot of the issue you have.
Thanks!
EDIT
Initial response was flawed. I have amended to the below - there will be some browser restrictions but there are work-arounds to get the correct behaviour:
div {
display:block;
width:49%;
float:left;
clear:left;
}
div.C {
display:inline-block;
float:none;
}
It would be simpler to rearrange them and have A float to the right: http://jsfiddle.net/78NnN/
<html>
<body>
<style type="text/css">
.a {
float:left;
}
.b {
clear:both;
}
.c {
float: left;
margin-left: 10px;
}
</style>
<div class="a">A</div>
<div class="c">C</div>
<div class="b">B</div>
</body>
</html>
Hi,
it can't be done by float, because it's no valid flow.
Try this:
<style type="text/css">
.A {
background: green;
}
.B {
background: yellow;
position: relative;
}
.C {
background: red;
position: absolute;
top: 0;
right: 0;
}
.container {
position: relative;
}
</style>
<div class="container">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
Example: http://jsfiddle.net/YGw3E/
If inrbob's example doesn't work for you, an alternative to float might be the following HTML;
<div id="container">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div><!-- /container -->
With this CSS;
#container {
position: relative;
}
div.C {
position: absolute;
top: 0;
right: 0;
}
Let me know if that helps.