Page 1 of 2
Floating - but changing order in which it appears
Posted: Thu Aug 28, 2014 9:08 am
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?
Re: Floating - but changing order in which it appears
Posted: Thu Aug 28, 2014 10:55 am
by jdhmtl
I cannot duplicate in Firefox or Chrome, at least not with the information given. Video appears on top in both.
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 4:39 am
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..?
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 5:27 am
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?
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 5:33 am
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.
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 5:38 am
by Celauran
What happens to what's currently below description?
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 5:44 am
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.
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:16 am
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.
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:26 am
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.
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:38 am
by Celauran
Depends. You can certainly have something like this:
http://codepen.io/anon/pen/aElxk
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:43 am
by simonmlewis
Oh I didnt' realise that.
So with that in mind, is there a way to 'order' those divs via CSS?
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:49 am
by Celauran
Again, depends. The order in the markup should be meaningful. What did you have in mind?
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:54 am
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?
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:58 am
by Celauran
Same way as above. Just move the first right block above the left.
Re: Floating - but changing order in which it appears
Posted: Thu Sep 11, 2014 6:59 am
by Celauran
Couldn't edit the pen, but like so:
http://codepen.io/anon/pen/jiryh