Please help with divs floating left and right

[Spacerat]

So I have a header for a web page. The header contains the logo div (floating left). Then also divs for orders,wishlist,cart and account (in that order from left to right), but the order/wishlist/cart/account divs must float to the right. I.e. always stick to the right hand side of the site.

I have created the site here:
https://jsfiddle.net/k3rc5r0e/

I use display:inline-block for the divs so that they will wrap on a small screen. And float:right to put them on the right. But they are in reverse order. Probably the order in which they appear in the html and render order. I can put then in reverse order in the html to get the desired result, but is there not a better way?

Help appreciated. I am a HTML/CSS noob

 

[agnouja]

Like this?
https://jsfiddle.net/k3rc5r0e/1/

 

[jem]

https://jsfiddle.net/k3rc5r0e/3/

but there are a lot of weird things you're doing there. like wrapping everything in divs, which unless you need to style or replace with ajax is unnecessary.

 

[alphabyte]

Think of it like this:
1. You first have 'logo' floated left - no problem.
2. Then you have 'orders' floated right, so logically it floats to the right hand side of the page
3. Next you have 'wish list', so where does it go? With 'logo' on the left and 'orders' on the right, and now 'wish list' joining the queue it moves across to the right, until it meets up with 'wish list' and it stops there. So now your sequence on the page is 'logo', 'wish list' and then 'orders.
Does that help you understand what is happening? So your solution of placing them is reverse sequence is in fact quite logical.

 

[Spacerat]

https://jsfiddle.net/k3rc5r0e/3/
but there are a lot of weird things you're doing there. like wrapping everything in divs, which unless you need to style or replace with ajax is unnecessary.

The idea is to style the divs yes. And secondly to design a responsive website that will readjust with mobile phones portrait/landscape and diff resolutions, creating these divs are quite important. The styling and layout will change depending on resolution and orientation.

Like this?
https://jsfiddle.net/k3rc5r0e/1/

Awesome! Neat trick with the right-container

Think of it like this:
1. You first have 'logo' floated left - no problem.
2. Then you have 'orders' floated right, so logically it floats to the right hand side of the page
3. Next you have 'wish list', so where does it go? With 'logo' on the left and 'orders' on the right, and now 'wish list' joining the queue it moves across to the right, until it meets up with 'wish list' and it stops there. So now your sequence on the page is 'logo', 'wish list' and then 'orders.
Does that help you understand what is happening? So your solution of placing them is reverse sequence is in fact quite logical.

Thank, just seemed counter intuitive.

 

[Kilgore_Trout_Redux]

CSS is Dark Magic. Bring back tables.

 

[battletoad]

CSS is Dark Magic. Bring back tables.

haha! I have a colleague who swears by this. Needless to say he's a backend developer

 

[Spacerat]

CSS is Dark Magic. Bring back tables.

Download the free ebook CSS3 Succinctly from SyncFusion. Worth the read.