Floating - but changing order in which it appears

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Floating - but changing order in which it appears

Post by simonmlewis »

I am adjusting some responsive web sites.
On Desktop on I have something like this:

Code: Select all

<style>
.leftbox
{
float: left; width: 400px;
}
.rightbox
{
float: right; width: 400px;
}
</style>

<div class='leftbox'>
video here
</div>

<div class='rightbox'>
content here
</div>

But when the screenis viewed at 500 pixels, I Want the leftbox to appear at the top of the screen, but right now it comes at the bottom.
So is there a way to give a DIV priority, or do changing the ordering of the DIVs, but still make them appear as required?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
jdhmtl
Forum Newbie
Posts: 18
Joined: Tue Aug 12, 2014 7:33 am

Re: Floating - but changing order in which it appears

Post by jdhmtl »

I cannot duplicate in Firefox or Chrome, at least not with the information given. Video appears on top in both.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Floating - but changing order in which it appears

Post by simonmlewis »

How would I do this for multiple DIVs?
Say, for a mobile optimized responsive site. so when it crushes down to narrow, the DIVs all change order.

I'm guessing it is with parent and child, but how do you specify the order of the child DIVs? If you have 10 for example..?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating - but changing order in which it appears

Post by Celauran »

They don't typically all change order. Left to right generally becomes top to bottom. Do you have an example of what you're trying to accomplish?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Floating - but changing order in which it appears

Post by simonmlewis »

Not yet.
We will have a product page with two columns. In each other is information. Left column has photo, then description, then some other stuff.
Right column has price. any reduced price, ratings, and then other stuff.

I want so that if it goes mobile, Price appears below description... as one example.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating - but changing order in which it appears

Post by Celauran »

What happens to what's currently below description?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Floating - but changing order in which it appears

Post by simonmlewis »

Right now you would have (not yet built) something like this:

Code: Select all

<div class='rightbox'>
<div class='price'>text here</div>
<div class='pricedrop'>text here</div>
<div class='ratings'>text here</div>
</div>

<div class='leftbox'>
<div class='description'>text here</div>
<div class='boxforotherstuff'>text here</div>
</div>
The Right box is floated right, the left box is floated left.

I would of course display the float, And looking at it now, I don't think I can even move Price to be in the leftbox div.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating - but changing order in which it appears

Post by Celauran »

Perhaps not. What about .boxforotherstuff? If that gets hidden, say, then the whole thing is moot and it will display how you want.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Floating - but changing order in which it appears

Post by simonmlewis »

But that may be needed.

The issue is, as far as I know, you cannot have one box float left, and then several boxes floating right. The 'several' have to be in a box... accomodating them, that's floating right.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating - but changing order in which it appears

Post by Celauran »

Depends. You can certainly have something like this: http://codepen.io/anon/pen/aElxk
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Floating - but changing order in which it appears

Post by simonmlewis »

Oh I didnt' realise that.
So with that in mind, is there a way to 'order' those divs via CSS?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating - but changing order in which it appears

Post by Celauran »

Again, depends. The order in the markup should be meaningful. What did you have in mind?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Floating - but changing order in which it appears

Post by simonmlewis »

well lets say on a product page, the product name is on the right, below that is the price in the other 'right' div, and the photo is in the left div.
But when on mobile, the product name div is at the top, then the photo div, then the other 'right' div.

How would you achieve that?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating - but changing order in which it appears

Post by Celauran »

Same way as above. Just move the first right block above the left.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Floating - but changing order in which it appears

Post by Celauran »

Couldn't edit the pen, but like so: http://codepen.io/anon/pen/jiryh
Post Reply