1

In the following example also found at: http://jsfiddle.net/vqBLX/1/ is there any way to get block "six" to float to the top of the right column without changing its position in the html?

Code Example:

#container{width:200px; backgroung:#ccc;}
.box{width:110px; height:100px; background-color:red;}
.one, .two, .three, .four, .five{float:left}
.six{float:right; background-color:blue; width:90px;}

​ 

<div id="container">
    <div class="box one"> </div>
    <div class="box two"> </div>
    <div class="box three"> </div>
    <div class="box four"> </div>
    <div class="box five"> </div>
    <div class="box six"> </div>
</div>
Improve this question

4 Answers 4

Reset to default
2

Not without using absolute or relative positioning. You could put it second and float it left. Or put it first and float it right.

To position it absolutely, set your #container to position: relative. Set the box six to position: absolute; top: 0; right: 0

Or use the margin idea as suggested by the others.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You're right in your first sentence, but the OP doesn't want to change the position of the element in the HTML.
yeah I think I may have to use absolute positioning. In my site build there is nothing else floating right that would stop me from positioning "six" absolutely. I'm getting tired and wanted to make sure i'm not overlooking something obvious.
Yeah I personally like absolute positioning. When I started I overused, abused and made a lot of problems with it. So I went off of it for a long time, then as you get better again you realize there actually are situations which benefit from it and it works well. As long as you're not positioning everything absolutely you should be fine. Cool story me.
I'm building a responsive layout, so I have a lot of rules for what I can and can't do. In this case I think absolute positioning is going to save the day
1

You could add:

position: relative; top: -400px;

to your .six class in the CSS.

Improve this answer

Comments

0

Not the best answer, but it works:

.six{float:right; background-color:blue; width:90px; margin-top: -400px;}
Improve this answer

3 Comments

@peter that would work, but it doesn't seem proper. It would also break if any box in the left column changed its vertical height. Are there no other ways?
There is. You can group the red boxes with a DIV. Then, you can manage the position of the blue box.
Hmm, I guess my simple question to answer a complex problem isn't working. I'm trying to build a responsive layout where at some points the columns all align vertically and at others certain columns fall next to each other. I think I know what I need to do now though.
0 
.six{position: relative; left:110px; top:0px; background-color:blue; width:90px;}

http://jsfiddle.net/vqBLX/9/

Not sure it's what you are looking for.

Improve this answer

2 Comments

This would be exactly what I'm looking for but for some reason in my actual site, it is knocking my sidebar way off to the right.
Even though you accepted my answer, if you did want to use position relative, what you basically need to do is see where it is without the position, then measure how many pixels you would need to use to get it where you want it (up= -top, down= top, left= -left, right= left). Relative doesn't take it out of the document flow however, so it will leave a space where it should be.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.