CODEWITHSUNDEEP
htmlcsslayoutpositioningcss-float
Adam Lindberg
Adam Lindberg

Reputation: 16577

With three divs, how to make one float to the right?

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.

Upvotes: 1

Views: 326

Answers (6)

Stuart Burrows
Stuart Burrows

Reputation: 10814

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;
    }

Upvotes: 2

Gary Green
Gary Green

Reputation: 22395

<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>

Upvotes: 1

Jo Sprague
Jo Sprague

Reputation: 17363

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.

Upvotes: 1

sled
sled

Reputation: 14625

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/

Upvotes: 1

Nikita Rybak
Nikita Rybak

Reputation: 68006

It would be simpler to rearrange them and have A float to the right: http://jsfiddle.net/78NnN/

Upvotes: 0

Iznogood
Iznogood

Reputation: 12843

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.

Upvotes: 0

Related Questions